Vue cli 工程中使用 style-resources-loader 預加載全局less文件

1. 關於 style-resources-loader

它是一個用於Webpack的CSS(預處理器)樣式資源加載器，其能夠將全局性的樣式注入到如css, sass, scss, less, stylus等模塊中。

2. 在vue cli項目中使用 style-resources-loader

  2.1 在工程文件夾下開啟終端，執行下行命令 (前提：本地vue cli環境已經配置好)

vue add style-resources-loader

  2.2 vue.config.js 中會新增下述代碼（沒有vue.config.js文件，會被創建）

// vue.config.js（示例代碼）
const path = require('path');

module.exports = {
  // ...
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, `src/assets/less/variables.less`)
      ]
    }
  }
  // ...
};

  2.3 在具體的頁面文件中直接使用全局的less變量（重新啟動項目開發環境）

.demo {
  color: @primary-color;
}

 

 

注：

style-resources-loader 的npm地址：https://www.npmjs.com/package/style-resources-loader