使用SCSS擴展Bootstrap4

摘要

因為打算寫一個小網站，而個人時間又不是那么充裕，所以沒有選擇前后端分離的架構。

對於非前后端分離應用來說，Bootstrap應該是目前的最佳前端框架之一了。

而Bootstrap4，是Bootstrap的最新版本，其更新內容中，有關自定義擴展的支持，相對來說要比以前方便很多。

注：SCSS與SASS本質上是一樣的，只不過在語法層面上來說，SCSS相對更加貼近SASS。所以下文中默認使用SCSS的語法。

准備

安裝環境

• 安裝npm
• 安裝SASS

下載源碼

npm install bootstrap

Tips:

• 不要執行npm install bootstrap4，必須是bootstrap

目錄結構

• 必須保持下面的目錄結構

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

擴展

• 使用SASS編譯完成自定義的擴展代碼后，會將原bootstrap也打包在一起，然后只要引入這一個文件就可以了。
• 可以使用SASS的組件特性，來擴展bootstrap，這樣會在編輯的源碼，更加的有結構

引用Bootstrap

@import "node_modules/bootstrap/scss/bootstrap";

編譯自定義源碼

sass <XXX.scss> <XXX.css>

參考

• Theming Bootstrap
• SASS