vuecli3 配置less全局变量

1.如果没有安装less，请先安装less

npm i less-loader less --save-dev 

2.如果需要定义全局变量，请安装

npm i style-resources-loader --save-dev 

3.在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/vars.less')]
    }
  }
}

4.此时，可以去页面试一下了

// vars.less
@my-bg-color: #f5f5f5;
@my-theme-color: #F04846;



// 页面
.my-header{
  background: @my-theme-color;
}

 

 遇到的坑

如果，发现页面引入一直报错，说找不到或者不存在，或者定义无效，那么再去安装一下

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

 其实按道理安装style-resources-loader时，vue-cli-plugin-style-resources-loader应该会一起安装了，不过有时候特殊原因导致vue-cli-plugin-style-resources-loader安装失败，所以会包这个错。安装完重启就可以用了。