若不想用 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 就可以看到效果了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *