解決 Vue CSS 樣式重複載入，爲 Vue 添加全局 less 或 sass 基礎樣式庫

訴求

項目開發使用了 iView 組件庫，在開發過程當中想自定義 iView 主題可是按照 iView 官方推薦「變量覆蓋」方法配置完後會出現 CSS 樣式重複載入的狀況，以下圖：

網上包括 Vue CLI 官方都是推薦使用 style-resources-loader 進行「開發環境」自動化導入，可是你會發現按照給出的方法配置完以後仍是會出現 CSS 樣式重複的狀況，折騰了很久最終經過比較 iView 官方的「變量覆蓋」教程和 Vue CLI 官方的自動導入教程發現了問題所在：

發現錯誤

iView 推薦的「變量覆蓋」方法是這樣的：

實質上就是新建一個 less 文件，引入 iview 的 less 入口文件，覆蓋官方提供的可覆蓋變量，而後在 mian.js 中引用自定義的 less 文件代替引用 iview less 入口文件。

而 Vue CLI 提供的自動化導入教程是這樣的：

實質上就是在每一個文件（全局）導入咱們提供的樣式文件（示例中是 ./src/styles/imports.styl' 文件）

正常來講按照 Vue CLI 官方給出的自動化導入教程配置就能夠在開發環境下爲全局導入「基礎樣式庫」，但我由於先使用了 iView 官方提供的「變量覆蓋」方法修改了基礎樣式，又把帶有引入 iview less 入口文件命令的自定義 less 文件當成基礎樣式庫導入到了全局，這就形成了全局每個頁面都導入了一次 iview 樣式從而引起前面所說的 CSS 樣式重複載入。

我當時的錯誤配置以下：

解決方案

正確的配置方法是將本來糅雜的樣式文件分離成「全局樣式入口文件」和「基礎樣式庫文件」兩個文件：

「全局樣式入口文件」用來引入須要的文件（在個人項目中是「iview less 入口文件」和「基礎樣式庫文件」）; 「基礎樣式庫文件」用來存放項目的基礎樣式（通常爲 less sass 變量和公用函數等等）;

修改後的配置以下：

注：個人「自動化導入」部分是參考 碼路芽子-Vue Cli3.0 全局引入 less 變量 進行設置的。

效果以下：

參考

1. 碼路芽子-Vue Cli3.0 全局引入 less 變量
2. Vue CLI 官方文檔-CSS 相關-自動化導入