vue2 全局使用less动态变量

1、安装sass-resources-loader    【你没看错，就是sass-resources-loader】

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

2、安装 less less-loader    

【对版本有要求，less-loader版本过高会报错】

npm install [email protected] --save

npm install less --save

less-loader版本过高报错

3、安装 style-resources-loader、vue-cli-plugin-style-resources-loader

npm install style-resources-loader  --save-dev

npm install vue-cli-plugin-style-resources-loader --save-dev

4、新建全局less变量文件

5、配置文件修改

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

在 export.cssLoaders = function(options){} 方法中

添加  path.resolve(__dirname, '../src/assets/theme.less') //这里是全局less的路径，根据自己的修改    这句话添加与否好像没有影响

修改  return中的less，

less: generateLoaders('less').concat({

      loader: 'sass-resources-loader',

      options: {

      resources: path.resolve(__dirname, '../src/style/common.less')

      }

    }),

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

6、变量@par-color现在就可以组件中引用

【记得style标签中添加 lang="less"】

helloworld.vue中引用

效果展示

7、项目插件版本展示

    "less": "^4.1.3",

    "less-loader": "^5.0.0",

    "sass-resources-loader": "^2.2.5",

    "vue-cli-plugin-style-resources-loader": "^0.1.5",

    "style-resources-loader": "^1.5.0",