vue-cli4配置less全局变量

一、安装依赖

yarn add --dev less-loader less
yarn add --dev style-resources-loader

二、配置

在vue.config.js文件中添加：

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
   pluginOptions: { // 第三方插件配置
        'style-resources-loader': {
          preProcessor: 'less',
          patterns: [path.resolve(__dirname, 'src/assets/styles/variables.less')] // less所在文件路径
        }
     }
 }

三、使用

在variables.less文件中声明变量：

@blue:#00f;
@red:#f00;
@green:#0f0;

在.vue文件中使用：

<style lang="less" scoped>
   .h2{
       color: @red; // 声明的less样式变量
   }
</style>

注意：如果发现页面引入一直报错，说找不到、不存在或者定义无效等错误，那么还需要安装依赖：

yarn add --dev vue-cli-plugin-style-resources-loader

其实，正常情况下载安装依赖style-resources-loader时，会同时安装vue-cli-plugin-style-resources-loader，可能有其它不确定原因导致vue-cli-plugin-style-resources-loader安装失败，出错的话就需要手动安装了。

安装完成，重启服务即可。