vue-cli使用less全局变量

由于版本问题，创建的项目没有build/utils.js，所以要在vue.config.js中配置，如果没有，在根目录自行创建

第一步

npm install style-resources-loader
           

第二步

打开vue.config.js，复制以下代码，更换其中的less地址即可

// vue.config.js
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack: (config) => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach((type) =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );
  },
  // webpack-dev-server 相关配置
  devServer: {
    // 调试端口
    // port: 8989
  },
  //其他配置....
};

function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [
        path.resolve(__dirname, "./src/assets/less/common.less"), // 需要全局导入的less
      ],
    });
}