webpack + vue 全局共享使用less变量的解决方案

vue-cli生成的工程下，样式使用了less语言，其中定义了一些全局变量，比如常用颜色，便于样式切换。

//theme.less

@main: #fff;
@sub: #fff;
@border: #fff;
@grey: #fff;

但是Vue单文件组建内，less变量不能共享和继承。
每个文件都要@import一遍也挺麻烦的。

不完美解决方案如下：

在./build/utils.js中
首先添加getLessVariables方法

....
function getLessVariables(file) {
  var themeContent = fs.readFileSync(file, 'utf-8')
  var variables = {}
  themeContent.split('\n').forEach(function (item) {
    if (item.indexOf('//') > -1 || item.indexOf('/*') > -1) {
      return
    }
    var _pair = item.split(':')
    if (_pair.length < 2) return;
    var key = _pair[0].replace('\r', '').replace('@', '')
    if (!key) return;
    var value = _pair[1].replace(';', '').replace('\r', '').replace(/^\s+|\s+$/g, '')
    variables[key] = value
  })
  return variables
}
....

然后给less-loader配置config

function generateLoaders(loader, loaderOptions) {
  ....
  return{
    ....
    less: generateLoaders('less', {
      modifyVars: getLessVariables('./src/style/theme.less')
    }),
    ....
  }
  ...
}

这样就能做到全局共享一个theme.less文件里的变量了。

但是
这个方法并不能实现热更新，修改theme后需要手动重启npm run dev

提前把变量都写好吧

完美解决方案如下：

使用sass的sass-resources-loader，也可以兼容less

在./build/utils.js 的exports.cssLoaders = function (options) { ... }中添加generateLessResourceLoader方法

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

然后把下边的

less: generateLoaders(),

替换成

less: generateLessResourceLoader('less'),

即可

这个方法可以完美实现全局less变量共享，和修改变量后的热重载。