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文件里的變量了。

但是
這個方法并不能實現(xiàn)熱更新，修改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'),

即可

這個方法可以完美實現(xiàn)全局less變量共享，和修改變量后的熱重載。