Webpack+vueグローバル共有less変数を使用したソリューション

vue-cliが生成したエンジニアリングでは、スタイルはless言語を使用し、一般的な色などのグローバル変数を定義し、スタイルの切り替えを容易にします.

//theme.less

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

しかし、Vue単一ファイルの作成ではless変数を共有したり継承したりすることはできません.ファイルごとに@importを1回使うのも面倒です.
不完全な解決策は次のとおりです.
./build/utils.jsでgetLessVariablesメソッドを最初に追加

....
function getLessVariables(file) {
  var themeContent = fs.readFileSync(file, 'utf-8')
  var variables = {}
  themeContent.split('
').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変数共有と変数修正後の熱再負荷を完璧に実現できる.