2019-02-20 | Leave a comment 若不想用 Bootstrap 4 預設的配色或設定,想要自己定義的話,作法很簡單: 安裝 Node.js 可以選擇用作業系統預包的套件,或是去 https://nodejs.org/ 下載編譯好的二進位程式並設定搜尋路徑。裝好之後執行以下指令應可以看到版號: william@op-room ~> node -v v10.15.1 安裝 sass 工具 安裝 sass (全域): npm install --global sass 使用 npm 安裝 Bootstrap 4 開發套件 因為等等編譯 scss 時需要參照 Bootstrap 4 的 scss,所以也要先裝好: #目前最新版是 4.3.1 npm install bootstrap@4.3.1 建立自訂的 scss 檔案 隨便建個檔案,比方 main.scss,內容如下: // 自訂的變數要放在前面,才能覆蓋預設值 // 可參考 https://getbootstrap.com/docs/4.3/getting-started/theming/ $theme-colors: ( "primary": #37e946, // 比方把 primary 顏色從預設藍色改成亮綠色 ); // 引入 Bootstrap 4 @import "node_modules/bootstrap/scss/bootstrap"; 使用 sass 工具產生自訂的 css 產生 css 檔案: sass main.scss main.css 最後在 html 引入 main.css 就可以看到效果了。