Vue Cli3.0 全域性引入 less 變數

碼路芽子發表於2019-05-15
Vue變數

我們開發過程中經常會使用很多 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!

Vue Cli3.0 全域性引入 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…

相關文章