使用less-loader 设置全局颜色变量，运行没问题，build的时候报错了

Question

设置完成后执行npm run dev没有问题，但是打包的时候使用该变量的地方却都报错了。
配置代码如下：

webpack.base.config.js:

    const lessConfig = {
        globalVars: {
               "primary": "#9187FD"
        },
    };
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              loaders: {
            less: ExtractTextPlugin.extract({
                          use:  ['css-loader', 'less-loader?'+JSON.stringify(lessConfig)}],
                          fallback: 'vue-style-loader'
                     })
            }
            }
         ]
       }

报错信息如下：

Module build failed: ModuleBuildError: Module build failed:
text-align: center;
color: @primary;
Variable @primary is undefined
in D:\Code\pregnotice-webapp\src\components\ViewBox.vue (line 126, column 9)

非常困惑，不知道改怎么解决，请各位大神帮忙看看

Answer 1

已经解决，
@primary 这个变量已经在less-loader中配置。
一开始使用的是旧版的vue-cli 脚手架自动生成的webpack配置文件，其中vue-loader的配置文件引用了util.js，是脚手架封装的配置方法。
旧版

 const lessConfig = {
  globalVars: {
    "primary": "#9187FD",
    "vice":"#FB7089"
  },
 };
exports.assetsPath = function (_path) {
  var assetsSubDirectory = process.env.NODE_ENV === 'production'
   exports.cssLoaders = function (options) {
   options = options || {}
     // generate loader string to be used with extract text plugin
      function generateLoaders (loaders) {
        var sourceLoader = loaders.map(function (loader) {
        var extraParamChar
        if (/\?/.test(loader)) {
         loader = loader.replace(/\?/, '-loader?')
         extraParamChar = '&'
         } else {
           loader = loader + '-loader'
           extraParamChar = '?'
         }
         return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
      }).join('!')
        if (options.extract) {
            return ExtractTextPlugin.extract({
              use: sourceLoader,
              fallback: 'vue-style-loader'
             })
         } else {
            return ['vue-style-loader', sourceLoader].join('!')
         }
      }
      return {
        css: generateLoaders(['css']),
        postcss: generateLoaders(['css']),
        less: generateLoaders(['css', 'less?'+JSON.stringify(lessConfig)]),
        sass: generateLoaders(['css', 'sass?indentedSyntax']),
        scss: generateLoaders(['css', 'sass']),
        stylus: generateLoaders(['css', 'stylus']),
        styl: generateLoaders(['css', 'stylus'])
        var loader = loaders[extension]
        output.push({
          test: new RegExp('\\.' + extension + '$'),
          loader: loader
        })
     }
  return output
 

新版代码

 const lessConfig = {
  globalVars: {
    "primary": "#9187FD",
    "vice":"#FB7089"
  },
 };
    exports.assetsPath = function (_path) {
      var assetsSubDirectory = process.env.NODE_ENV === 'production'
       exports.cssLoaders = function (options) {
       options = options || {}
         var cssLoader = {
           loader: 'css-loader',
           options: {
           minimize: process.env.NODE_ENV === 'production',
           sourceMap: options.sourceMap
         }
       }
       // generate loader string to be used with extract text plugin
       function generateLoaders (loader, loaderOptions) {
          var loaders = [cssLoader]
         if (loader) {
            loaders.push({
              loader: loader + '-loader',
              options: Object.assign({}, loaderOptions, {
                  sourceMap: options.sourceMap
              })
            })
         }
         if (options.extract) {
            return ExtractTextPlugin.extract({
            use: loaders,
                 fallback: 'vue-style-loader'
            })
         } else {
          return ['vue-style-loader'].concat(loaders)
         }
      }
      return {
          css: generateLoaders(),
          postcss: generateLoaders(),
          less: generateLoaders('less', lessConfig),
          sass: generateLoaders('sass', { indentedSyntax: true }),
          scss: generateLoaders('sass'),
          stylus: generateLoaders('stylus'),
          styl: generateLoaders('stylus')
          var loader = loaders[extension]
          output.push({
            test: new RegExp('\\.' + extension + '$'),
            use: loader
          })
       }
      return output

比较两者可以发现一个传的是对象，一个传的是字符串参数，个人认为应该是webpack无法识别字符串参数导致的build出错，用新版的build.js替换后build就成功了

Answer 2

Variable @primary is undefined 它说你这个变量未声明，请看下你less代码 贴出来