less全局变量

1. 安装依赖

vue add style-resources-loader vue-cli-plugin-style-resources-loader -D

1. 修改vue.config.js（没有的话在根目录创建） ```javascript // eslint-disable-next-line @typescript-eslint/no-var-requires const path = require(‘path’)

module.exports = { publicPath: ‘’, pluginOptions: { ‘style-resources-loader’: { preProcessor: ‘less’, patterns: [ path.resolve(__dirname, ‘./src/less/theme.less’) ] } } }

3. 创建全局变量文件
![image.png](https://cdn.nlark.com/yuque/0/2021/png/2308212/1613872899676-9a4bb825-5f30-4102-8769-8a850bc5397f.png#align=left&display=inline&height=101&originHeight=101&originWidth=280&size=4479&status=done&style=none&width=280)
4. less文件定义变量
```less
@color-primary:#409EFF;
@color-success:#67C23A;
@color-warning:#E6A23C;
@color-danger:#F56C6C;
@color-info:#909399;
@color-text-primary:#303133;
@color-text-regular:#606266;
@color-text-secondary:#909399;
@color-text-placeholder:#C0C4CC;
@color-border-base:#DCDFE6;
@color-border-light:#E4E7ED;
@color-border-lighter:#EBEEF5;
@color-border-extra-light:#F2F6FC;
@color-background-white:#FFFFFF;
@color-background-black:#000000;
@color-background-base:#F5F7FA;

1. 项目中使用变量

   <style lang="less">
   #app {
   color: @color-success;
   margin-top: 60px;
   }
   </style>