Vue3使用less

朱雀 2023-10-04 13:07 49阅读 0赞

#### 文章目录 ####

*  1、配置使用
 *  2、遇到的问题

--------------------

## 1、配置使用 ##

> 以`less`为例

*  1.1 使用`vue add style-resources-loader` 命令安装  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70]
 *  1.2 安装完之后，会自动在`package.json`的同级目录下自动新建一个`vue.config.js`文件，内容如下：

module.exports = {
        
      pluginOptions: {
        
        'style-resources-loader': {
        
          preProcessor: 'less',
          patterns: []
        }
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 1]

--------------------

*  1.3 安装`less 以及less-loader`

yarn add less less-loader --save-dev

*  1.4 在项目中使用,以`HelloWorld`组件为例

> 通过`lang='less'`标志使用了`less`

<template>
        <div class='main'>
            <div class="text">
                hello
            </div>    
        </div>
    </template>
    
    <script>
    
    </script>
    
    <style lang='less'>
    .main{
        
        .text{
        
            color:red;
        }
    }
            
        
    </style>

*  1.5 启动服务

yarn serve

*  1.6 效果展示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 2]

## 2、遇到的问题 ##

*  2.1 如果出现以下错误  
    ![在这里插入图片描述][20210510204516179.png]  
    ，我遇到这个错误的时候，曾以为是配置文件的问题，一顿百度乱打，心情极度复杂，后来灵光一闪`会不会是less版本问题`，然后我就将`less`的版本将低一个版本，还是出现以上问题，最后我又将`less-loader`将低了一个版本，结果如下  
    ![在这里插入图片描述][20210510204826864.png]  
    说明`less-loader版本过高了`，我降低的版本的办法  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 3]

--------------------

问题出现时间2021年5月10日, 解决方法仅供参考

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210510203758105.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210510205331833.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210510204426892.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[20210510204516179.png]: https://img-blog.csdnimg.cn/20210510204516179.png
[20210510204826864.png]: https://img-blog.csdnimg.cn/20210510204826864.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210510204908412.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70