【筆記】記錄Bootstrap 引入方式，以便日後無痛更新

用Bootstrap當SCSS教科書一段時間後，一邊參考一邊實做，修改成了自己想要的風格樣式。


就在BS的樣板已經被我改得面目全非的時候，我發現了一件天殺的事實。
BS這個佛心的開源樣板，他會覺得自己不夠好，
然後他會修正Bug，會增加組件，會調整變數，
總之....天殺的...
他是會更新的...他是會更新的...他是會更新的...


這時如果我把新版本上面的SCSS，下載，覆蓋，
那我過去幾個月胡搞瞎搞的專案，就會塵歸塵...土歸土...一切化為烏有



啊...認真檢討，我之前一定是犯傻了，居然沒有想到模板更新這件事。
為了不要痛第二次，還是要付出成本，把之前犯傻的坑補回來。


記錄一下如何把BS模板跟自己客制化的資料夾分開。
以便日後無痛更新。

1. 建立兩個資料夾 + main.scss

 main.scss裡面的語法，

@import "custom/custom";

@import "bootstrap/bootstrap";

結果2天之後就出包，因為這樣轉碼後的main.，會變成：
先產出bootstrap的CSS，
再產出自定義custom的CSS，


CSS：相同class，後面的行數會覆蓋前面的。
SCSS：相同變數，後面覆蓋前面。
但如果只有對調順序，變數（例如顏色）還是會優先使用Bootstrap的預設值。
最後實驗結果改成這樣。
main.scss裡面的語法，

@import "custom/functions";

@import "custom/variables";

@import "custom/mixins";

@import "bootstrap/bootstrap";

@import "custom/custom";

2. BS 原版， 複製bootstrap.scss，改名為_bootstrap.scss
 

3.自定義：

1. 完整複製BS原版：
•     /mixins,
•     _funtion.scss
•     _variables.scss
2. 建立4個空資料夾，和相對應的SCSS
3. _custom.scss用來引入/custom資料夾內所有_*scss，語法如下

@import "functions";

@import "variables";

@import "mixins";

@import "utilities";

@import "components";

@import "pages";

4. copy BS的然後修改，或是自己寫新的

---

明明Bootstrap 英文官方網站上有教學QQ，都是因為我不看字，才多轉了一圈啊...

https://getbootstrap.com/docs/4.3/getting-started/webpack/#importing-precompiled-sass