vue中全局引入less变量

在项目中我们经常用less来定义一些全局变量，比如字体大小颜色，背景颜色，边框颜色，标题高度，按钮大小等等。 我们把这些less变量定义在const.less文件中，并在main.js，发现并不起作用。

解决方法为：

1、安装 sass-resources-loader

npm install sass-resources-loader --save-dev
复制代码

2、build 的utils.js中exports.cssLoaders = function (options) {}添加代码

function lessResourceLoader(){
    var loaders = [
      cssLoader,
      'less-loader',
      {
        loader: 'sass-resources-loader',
        options: {
            resources:[
              path.resolve(__dirname, '../src/common/less/const.less')
            ]
        }
      }
    ];
    if(options.extract){
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    }else{
      return ['vue-style-loader'].concat(loaders)
    }
  }
复制代码

3、path.resolve(__dirname, '../src/common/less/const.less')改为less所对应的路径 并将 return{} 块中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()

这样你就可以在任意组件中中使用const.less中定义的变量了

转载于:https://juejin.im/post/5be53e94f265da616916bde9