在vue的webpack專案使用less引用全局變數

webpack.config.js

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
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {
            css: "vue-style-loader!css-loader",
            less: [
              "vue-style-loader",
              "css-loader",
              {
                loader: "less-loader",
                options: {
                  globalVars: getLessVariables("./src/styles/global.less")
                }
              }
            ]
          }
        }
      }
    ]
  }
}