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!

 

 

 

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，这样所有样式都可以使用