webpack + vue + less 全局变量的解决方案

今天发现一个好用的东西sass-resources-loader
sass-resources-loader不仅支持SASS，还支持LESS，POSTCSS等
由于Vue单文件组建内，less变量不能共享
每个文件都要@import一遍，费时费力还不讨好
接下来使用sass-resources-loader设置less全局变量

安装

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

设置

在./build/utils.js 的exports.cssLoaders中添加lessResourceLoader

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

使用

common.less

@color-red=red;

HelloWorld.vue

<style lang="less">
a {
  color: @color-red;
}
</style>