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…