2019-06-20

在 Vue Cli 中加入自定義 Bootstrap 樣式

常常忘記該怎麼加入自定義的 Bootstrap 樣式，所以直接記下來不囉唆！
基礎的引入很簡單，按照步驟一定搞定～

安裝
1
npm install bootstrap --save
在 src 下的 assets 建立 helpers 資料夾
並將 node_moduled 中的 bootstrap _variables.scss 複製過去
在 src 下的 assets 建立 all.scss 檔案
用來管理所有 scss

在 all.scss 引入順序

1
2
3

@import "~bootstrap/scss/functions";
@import 'helpers/variables';
@import "~bootstrap/scss/bootstrap";

在 App.vue 中引入 all.scss

1
2
3

<style lang="scss">
  @import "./assets/all.scss"
</style>

如果要再加入其他自定義的 scss 可以在 src 下的 assets 建立 components 資料夾ㄅㄨ
並加入自定義的元件 scss 樣式，接著再 all.scss 引入就完成了！