Vue: 引入全局less 变量

安装依赖：

npm install sass-resources-loader --save-dev

• 适用于sass,less等引入全局文件。
• 在build 的utils.js中的

 exports.cssLoaders = function (options) {
   // 添加下面代码位置
 }

中加上以下代码：
然后将下面代码中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()。

 function lessResourceLoader() {
    var loaders = [
        cssLoader,
        'less-loader',
        {
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    path.resolve(__dirname, '../src/styles/variables.less'),
                ]
            }
        }
    ];
    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }
}
//引入的全局less 文件， 然后后面将下面代码中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()。

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    // less: generateLoaders('less'),
    less: lessResourceLoader(),
    sass: generateLoaders('sass', {
      indentedSyntax: true
    }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

新建variables.less 文件:

   @itemfc: #2AA4EA;
   @width1200: 1200px;
   @zyjColor: rgb(110, 42, 165);

注意，赋值不是等号

在组件中,使用全局变量:

<style lang='less' scoped>
 #container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color:@zyjColor;
 }
</style> 

注意：

• 修改完配置文件记得重启服务器：npm run dev
• variables.less 文件在build的utils中填写路径一定写对