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，这样全部样式均可以使用

web 前端群招人，有梦想的一群小青年 www.jianshu.com/p/33eee1c26…