3项目里面全局用less变量 cli vue_Vue Cli3.0 全局引入 less 变量

我们开发过程中经常会使用很多 less 变量，但是 vue 文件中想使用 less 变量，就需要挨个引入，极其麻烦。

现在我来揭秘：

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

@primary-color: #32b642; // 全局主色

@link-color: #32b642; // 链接色

@warning-color: #faad14; // 警告色

@error-color: #f5222d; // 错误色

@font-size-base: 14px; // 主字号

@heading-color: rgba(0, 0, 0, 0.85); // 标题色

@text-color: rgba(0, 0, 0, 0.65); // 主文本色

@text-color-secondary : rgba(0, 0, 0, .45); // 次文本色

@disabled-color : rgba(0, 0, 0, .25); // 失效色

@border-radius-base: 4px; // 组件/浮层圆角

@border-color-base: #d9d9d9; // 边框色

@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

@line: #e8e8e8; // 分割线颜色

2. 安装 style-resources-loader

vue add style-resources-loader

安装完成之后，命令行会让你选择预处理器，我们选择 less!

image.png

3. 将 themes.less 配置其中

上述安装完预处理器，会在项目的 vue.config.js 里面生成一段代码，我们只需要将 less 文件路径放入其中

pluginOptions: {

'style-resources-loader': {

preProcessor: 'less',

patterns: [path.resolve(__dirname, 'src/assets/css/index.less')]

}

}

我是将所有 less 全局样式统一引入到 index.less，这样所有样式都可以使用