摘要：使用，已改為使用，所以首先解決編譯問題。編譯與無關，需要在系統(tǒng)中安裝編譯環(huá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無關，需要在Mac系統(tǒng)中安裝SASS編譯環(huán)境。

1.??? 安裝node.js

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

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

node -v

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

sudo npm install npm@latest -g

? ? ? 更新npm版本。

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

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

sudo npm install -g node-sass less

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

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

sudo npm install -g sass

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

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

$padding: 6px;

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

  li { display: inline-block; }

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

? ? ? 使用終端命令編譯測試文件：

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

? ? ? 編輯成功后會得到我們預期的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同時還為我們生成了map文件：

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

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

1)??? Bootstrap4源碼結構

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

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

? ? ? Copy BS4源碼其中的SCSS文件夾至工作目錄，并新建一個custom.scss文件。目錄結構：

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

? ? ? scss文件夾存放BS4源碼，為避免直接修改源碼中的變量，我們將自定義變量放在custom.scss文件中。BS如果有升級，我們只需替換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任務

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

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

4)??? 完成編譯

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

4.??? 簡單體驗Bootstrap 4自定義

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

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

? ? ? 編譯后bootstrap會將新的主題顏色應用到相應的部件上，例如按鈕：

// 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部件也會增加相應的gray樣式。我們在編碼的時候就能使用自定義樣式了。

? ? ? 顯示效果：

? ? ? 是不是很棒，一個變量搞定一切。

?

參考：

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