摘要：使用，已改為使用，所以首先解決編譯問題。編譯與無關(guān)，需要在系統(tǒng)中安裝編譯環(huán)境。使用編譯源碼結(jié)構(gòu)簡(jiǎn)單分析源碼，其中文件夾包含了所有樣式文件源碼，部件和工具都是多帶帶的文件，很清晰。可以看到命令已成功運(yùn)行，及文件已經(jīng)生成。

環(huán)境：
macOS 10.13.6
node.js 8.11.3
sass 1.10.3
bootstrap 4.1.3
vs code 1.25.1

? ? ? Bootstrap3為我們提供了在線編譯工具，可以方便的調(diào)整變量，然后在線編譯得到我們想要的CSS文件。Bootstrap 4 不知出于什么考慮，官網(wǎng)一直沒有提供類似的在線工具，完成自定義后必須自己解決編譯問題。Bootstrap 3 使用LESS，Bootstrap 4已改為使用SASS，所以首先解決SASS編譯問題。SASS編譯與VS Code無關(guān)，需要在Mac系統(tǒng)中安裝SASS編譯環(huán)境。

1.??? 安裝node.js

? ? ? 從node.js官網(wǎng)下載for macOS安裝包，安裝node.js會(huì)同時(shí)安裝npm包管理工具。

? ? ? 安裝完成后，可以使用終端命令：

node -v

? ? ? 查看node.js是否安裝成功。

sudo npm install npm@latest -g

? ? ? 更新npm版本。

2.??? 安裝SASS編譯工具

? ? ? 微軟官方文檔使用node-sass，終端命令：

sudo npm install -g node-sass less

? ? ? 但我始終沒有嘗試成功，無論是切換至root帳號(hào)還是使用國(guó)內(nèi)鏡像安裝，都失敗了，搭梯子也沒用。要么是permission denied，要么是缺少python2環(huán)境，總之問題一大堆。

? ? ? 能夠編譯SASS的工具很多，換一個(gè)試試：

sudo npm install -g sass

? ? ? 這次很順利，一次搞定。下面測(cè)試一下SASS是否能夠正確編譯。

? ? ? 新建一個(gè)空文件夾同時(shí)創(chuàng)建一個(gè)style.scss文件，輸入測(cè)試代碼：

$padding: 6px;

nav {
  ul {
    margin: 0;
    padding: $padding;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: $padding 12px;
    text-decoration: none;
  }
}

? ? ? 使用終端命令編譯測(cè)試文件：

sass source/stylesheets/style.scss build/stylesheets/style.css

? ? ? 編輯成功后會(huì)得到我們預(yù)期的CSS文件：

nav ul {
  margin: 0;
  padding: 6px;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

/*# sourceMappingURL=styles.css.map */

? ? ? SASS同時(shí)還為我們生成了map文件：

? ? ? SASS編譯環(huán)境已安裝完成，VS Code就可以調(diào)用系統(tǒng)命令對(duì)SASS進(jìn)行編譯了。

3.??? 使用VS Code 編譯 Bootstrap 4

1)??? Bootstrap4源碼結(jié)構(gòu)

? ? ? 簡(jiǎn)單分析Bootstrap4源碼，其中SCSS文件夾包含了所有樣式文件源碼，部件和工具都是多帶帶的scss文件，很清晰。其中兩個(gè)文件是需要留意。一個(gè)是bootstrap.scss，里面import了所有部件和工具，我們只需針對(duì)此文件編譯即可得到完整的css文件；另一個(gè)是_variables.scss，里面定義了所有變量，如果要自定義樣式，我們只需更改其中的變量即可。

2)??? 創(chuàng)建工作目錄

? ? ? Copy BS4源碼其中的SCSS文件夾至工作目錄，并新建一個(gè)custom.scss文件。目錄結(jié)構(gòu)：

bootstrap Custom
    |-- scss
    |-- custom.scss

? ? ? scss文件夾存放BS4源碼，為避免直接修改源碼中的變量，我們將自定義變量放在custom.scss文件中。BS如果有升級(jí)，我們只需替換scss文件夾即可。

? ? ? 打開VS Code，打開工作文件夾，編輯custom.scss：

$theme-colors: (
  "gray": #6c7074
);

@import "scss/bootstrap";

? ? ? 文件最后import了scss文件夾中的bootstrap.scss文件，它含了bootstrap所有部件。

? ? ? 也可以多帶帶引用指定部件：

// 必須
@import "scss/functions";
@import "scss/variables";
@import "scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// 可選
@import "scss/root";
@import "scss/reboot";
@import "scss/type";
...

3)??? 創(chuàng)建VS Code任務(wù)

? ? ? 打開命令面板（??B），選擇“Tasks: Run Task” -? 選擇“配置任務(wù)...” -? 選擇“使用模版創(chuàng)建tasks.json文件” -? 選擇“Others”。上面步驟會(huì)創(chuàng)建tasks.json文件，我們可以對(duì)task進(jìn)行配置：

? ? ? label是任務(wù)名，command是sass編譯命令，其與終端命令是一致的。

4)??? 完成編譯

? ? ? 打開命令面板（??B），運(yùn)行我們的“Sass Compile”的任務(wù)。可以看到命令已成功運(yùn)行，CSS及map文件已經(jīng)生成。

4.??? 簡(jiǎn)單體驗(yàn)Bootstrap 4自定義

? ? ? 我的示例中為bootstrap添加了一個(gè)新的主題顏色：

$theme-colors: (
  "gray": #6c7074
);

? ? ? 編譯后bootstrap會(huì)將新的主題顏色應(yīng)用到相應(yīng)的部件上，例如按鈕：

// bootstrap.css

.btn-gray {
  color: #fff;
  background-color: #6c7074;
  border-color: #6c7074;
}
.btn-gray:hover {
  color: #fff;
  background-color: #5a5d60;
  border-color: #53575a;
}
.btn-gray:focus, .btn-gray.focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 112, 116, 0.5);
}
...

? ? ? btn-gray 就是根據(jù)我們自定義主題顏色而生成的新樣式，同樣background，text部件也會(huì)增加相應(yīng)的gray樣式。我們?cè)诰幋a的時(shí)候就能使用自定義樣式了。

? ? ? 顯示效果：

? ? ? 是不是很棒，一個(gè)變量搞定一切。

?

參考：

https://code.visualstudio.com/Docs/languages/CSS
http://sass-lang.com/install