Vue-cli项目中全局使用less变量

1、首先进入vue-cli项目

2、安装less、less-loader、style-resources-loader、vue-cli-plugin-style-resources-loader

npm i less less-loader style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

Vue-cli项目中全局使用less变量

3、新建一个less文件,在less文件中定义less变量

Vue-cli项目中全局使用less变量

4、项目跟目录新建vue.config.js

Vue-cli项目中全局使用less变量

5、在.vue文件中使用test.less文件中定义的变量

Vue-cli项目中全局使用less变量

6、运行项目,看看效果,字体变成了红色

Vue-cli项目中全局使用less变量

  • 上述讲解如果有问题,请提出,谢谢配合!