使用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