Vue3使用less

Posted 2021-07-18 一腔诗意醉了酒

文章目录

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

---

1、配置使用

以less为例

• 1.1 使用vue add style-resources-loader 命令安装
  
• 1.2 安装完之后，会自动在package.json的同级目录下自动新建一个vue.config.js文件，内容如下：

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

---

• 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 效果展示
  

2、遇到的问题

• 2.1 如果出现以下错误
  
  ，我遇到这个错误的时候，曾以为是配置文件的问题，一顿百度乱打，心情极度复杂，后来灵光一闪会不会是less版本问题，然后我就将less的版本将低一个版本，还是出现以上问题，最后我又将less-loader将低了一个版本，结果如下
  
  说明less-loader版本过高了，我降低的版本的办法
  

---

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

---