Bootstrap (1) SCSS 客製化-基礎環境建立

發表於 更新於 分類於
更改SCSS以客製化 Bootstrap

基礎環境建立

首先開一個資料夾，裡面有 index.html，和一個 scss 資料夾，裏頭有三隻 scss 檔案，

scss 則透過 vscode 內建插件 live scsss complie 進行編譯。

下載 Bootstrap

  1. 來到 bootstrap 官網 下載 bootstrap

    選擇 source code 下載

  2. 下載解壓縮後，在資料夾內找到 scss 資料夾，改名為 bootstrap 後，複製到一份自己的專案

  1. 在 all.scss 中 import bootstrap
1
2
3
4
// all.scss
@import './bootstrap/bootstrap.scss';
@import './faq';
@import './index';
  1. 在 index.html 中 css 的連結要選擇加入 bootstrap 編譯後的檔案
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh-Hant-TW">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style/all.css" />
  </head>
  <body>
    <h1>Hello World</h1>
    <a href="#" class="btn btn-primary">我是按鈕</a>
  </body>
</html>

  1. 到這邊就將 bootstrap 引入完成囉

NPM 與 SCSS 下載方式

在專案中使用 npm 安裝 bootstrap

1
npm install bootstrap@5.3.3

安裝完後我們的專案中 node_modules 資料夾會有 bootstrap

1
2
3
4
5
6
7
8
your-project/
├── scss/
│   └── all.scss
└── node_modules/
│   └── bootstrap/
│       ├── js/
│       └── scss/
└── index.html

在自己專案的 all.scss 中引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 客製化用的 variables
@import "./helpers/variables";

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

在 scss 資料夾中新增 helpers 資料夾，將 node_modules 裡的 bootstrap/scss/variables 檔案複製一份放入。