vue中使用less

前言

Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。因此我们只需要在项目中使用npm i就可以直接使用在项目中使用 Sass、Less、Stylus 在内的所有预处理器
点我查看官方教程

环境配置

在给vue添加less包时，一定要注意自己的环境（node的版本，以及安装过后less、less-loader等等的版本）
为了能够保证大家可以一次性安装成功，大家可以先将node的版本切换成和我一样的

两种安装方法

方式一

第一种方式需要安装四个包，分别为less、less-loader、style-resources-loader和vue-cli-plugin-style-resources-loader
为了能够保证一次安装成功，推荐大家安装和我一样的版本

npm i less@3.0.4 -D
npm i less-loader@5.0.0 -D
npm i style-resources-loader@1.4.1 -D
npm i vue-cli-plugin-style-resources-loader -D

提示：
1.style-resources-loader插件是用来将less文件内容进行全局共享的，如果不需要可以不安装，如果安装了不想用，可以给patterns一个空数组即可，完全不影响。
2.不要忘记在vue.config.js中引入path哦！！！
3.点我查看官方的对自动化导入的配置方法

然后去vue.config.js进行配置

  // 第三方插件配置
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.join(__dirname, "./src/assets/style/index.less")],
    },
  },

到此就安装成功了，就可以正常使用了。

方式二

这种方式比较简单一点，先安装less和less-loader

npm i less@3.0.4 -D
npm i less-loader@5.0.0 -D

然后直接使用命令：

vue add style-resources-loader

然后就会自动去vue.config.js进行配置，我们只需要更改vue.config.js文件里patterns的值就可以了，改成我们想要在全局共享的less文件即可。

测试效果

定义全局变量
使用全局变量

运行结果