目錄
- 開篇
- 用sass代替css
- 全局style處理
-
- 目錄結構
- 自動在main.js中導入to-css中的全部scss檔案
- 自動注入mixin和變量到各.vue檔案
開篇
本文是Vue最佳實踐系列的第一篇，整個系列将會分享我自己在使用vue過程中自己總結的以及吸取來的vue“最”佳實踐政策。
第一篇文章準備介紹css的最佳實踐，因為css是前端技術棧裡面最簡單的部分，是以我覺得從這裡入手還挺合适的。
用sass代替css
對sass不了解的讀者請務必閱讀下官方文檔來了解下sass究竟多強大！
配置方式如下：
- 安裝各種loader
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev
-
自動格式化.scss檔案
我的編輯器是vscode，想實作這個目标需要安裝名為CSScomb的插件。之後做些配置。具體安裝和配置方式參考這篇博文
其中幾個參數的含義如下：
"always-semicolon": true, // 在每個樣式後面加“;”
"block-indent": " ", // 縮進兩個空格
"lines-between-rulesets": 1, // 每組規則後加一個空行
"space-after-opening-brace": "\n", // 在開始的{後換行
"space-before-closing-brace": "\n", // 在結束的}後換行
"space-before-opening-brace": " ", // 在開始的{前加空格
"space-between-declarations": "\n", // 每個樣式後換行
"space-before-colon": " ", //color :red 中的:前加空格
"space-after-colon": " ", //color :red 中的:後加空格
另外，不要忘記勾選Auto format on save選項，這樣在儲存scss檔案的時候就會自動格式化。
全局style處理
目錄結構
在@/src/styles 目錄下設定如下目錄結構
解釋一下，我是根據scss的編譯目标來區分它們所屬的檔案夾的。像是scss中的mixin和變量，我總希望它們能被引入到各個.vue檔案内，供其他scss使用。
而一般的scss，比如全局樣式等，我希望它可以被編譯成css并引入到全局，最終供各标簽使用。是以我分成兩個檔案夾，供其他scss使用的放到to-css中，供各标簽使用的放到to-scss中。
再多說一點，免得讀者一頭霧水。scss的整個編譯流程是這樣：
- sass-resources-loader将to-scss檔案夾内的scss檔案自動引入到各個.vue檔案内。以上圖的scss檔案為例，可以了解為自動在每個vue檔案添加如下代碼：
【Vue最佳實踐】css開篇用sass代替css全局style處理自動注入mixin和變量到各.vue檔案 - to-css檔案夾内的index.js檔案會将 to-css檔案夾内全部scss檔案引入到全局。
- 之後sass-resources-loader會将@include test替換為實際的scss文本。(這一步隻是簡單的文本替換而已)
- 最後sass-resources-loader将scss編譯為css即可。
自動在main.js中導入to-css中的全部scss檔案
除了上面幾個scss檔案外，今後可能會不斷添加新的scss，如果每次都手動在main.js引入未免過于繁瑣。是以這裡使用webpack做一個自動導入。
在@/src/styles/to-css 目錄下繼續建立一個檔案，名為index.js。寫入如下代碼：
const req=require.context('./',false,/\.scss$/);
req.keys().map(key=>{
req(key);
})
之後就隻需要再main.js引入index.js一個檔案即可，如下:
自動注入mixin和變量到各.vue檔案
一般來說，我們總是希望變量和mixin能在各個.vue裡面直接使用的，而不是每次都手動引入。這點可以借助 sass-resources-loader 來實作。配置方法如下。
- 安裝
npm install sass-resources-loader --save-dev
-
修改vue.config.js檔案
如果讀者的項目中沒有這個檔案則需要先在項目根目錄下手動建立它。具體裡面要寫什麼内容的話，請參考這裡。
如果讀者不清楚chainWebpack的寫法可以先參考這篇文檔，之後要想進一步學習可以參考這篇文檔。