背景

通常我们在用less时，会定义诸多变量，来减轻更改时的负担，但是在vue开发时，如果我们有一个variable.less文件，在组件中使用变量时不得不写入这个文件的引用，如下图

@assets:"~@/assets";
@import "@{assets}/css/variable.less";

组件那么多，一个一个都要引用，想想都觉得麻烦，有没有好的办法呢？

方法

vue-cli2.x 版本创建的项目如何解决？

• 1 安装 sass-resources-loader

npm install sass-resources-loader --save-dev

• 2 修改构建文件
  新增的部分开始 ----- 新增的部分结束

// 项目根目录下 build/utils.js

  // 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 (loader == "less") {
      loaders.push({
        loader: "sass-resources-loader",
        options: {
          resources: path.resolve(__dirname, "../src/assets/css/variable.less")
        }
      });
    }
  //---------------新增的结束-------------------
    

// Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: "vue-style-loader"
      });
    } else {
      return ["vue-style-loader"].concat(loaders);
    }

  }

vue-cli3中修改方式

• 1 安装 所需的包

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

• 2 配置根目录下vue.config.js

module.exports = {
     ...
     pluginOptions: {
        "style-resources-loader": {
            preProcessor: "less",
            patterns: [
              //这个是加上自己的路径，
              //注意：试过不能使用别名路径
              path.resolve(__dirname, "./src/assets/variable.less")
             ]
         }
     }
     ...
    }