vue cli项目中全局使用less变量

第一步：安装style-resources-loader 、 vue-cli-plugin-style-resources-loader

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

第二步：定义一个 themes.less 文件，将你想用的全局变量装入其中

@primary-color          : #2d8cf0;
@info-color             : #2db7f5;
@warning-color          : #ff9900;
@error-color            : #ed4014;
@normal-color           : #e6ebf1;
@link-color             : #2D8cF0;

第三步：在vue.config.js中加入这块代码

pluginOptions: {
    'style-resources-loader': {
       preProcessor: 'less',
       patterns: [
          // 全局变量路径，不能使用路径别名
          path.resolve(__dirname, './src/styles/default/themes.less')
       ]
    }
}

第四步：在样式里使用

<style lang="less">
.header {
    color:@primary-color;
}
</style>