【转载】vue中如何添加less全局变量

vue-cli 2.X

1.安装

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

2.修改build文件夹下面的utils.js文件

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    //把这个注释掉
    // less: generateLoaders('less'),
    //换成这个 common.less 为全局变量文件
    less: generateLoaders('less').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, '../src/assets/css/common.less')
      }
    }),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

vue-cli 3.X

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")
          ]
      }
  }
  ...
 }

原文章地址:
https://www.cnblogs.com/mzzz/p/9913753.html