Day36 - 实战之引入 Bootstrap套件，客製化样式

準备好之后，接下来我们要来引入 Bootstrap 套件了，参考 铁人赛Day28 - Vue Cli

我们除了可以在 App.vue 的 style 引入 Bootstrap 的 Scss 之外，有时候我们也想客製化自己的样式，这时候我们就可以把 Boostrap 的变数拿来做使用，首先我们开新一个档案，存在 src 底下的 assets 资料夹底下为 all.scss 接着引入 Bootstrap 的 Scss:

@import "~bootstrap/scss/bootstrap";

接着我们在 src 底下的 assets 资料夹新增一个 helpers 资料夹，用于跟原版的 Bootstrap 的变数区别
接着到 node_modules 资料夹底下找 variables.scss 这支档案，另存新档到 helpers 底下

这时侯回到 all.scss 档案，我们要改写成如下:

@import "~bootstrap/scss/functions";     // 载入 bootstrap 变数可以用的方法@import "./helpers/_variables";          // 我们要客製化的变数@import "~bootstrap/scss/bootstrap";     // 全部 bootstrap 套件

都好了之后，我们可以把 Bootstrap 的元件贴到 App.vue 底下测试看看是否有成功
我们也可以任意去更改 helpers 底下的 variables.scss 内的变数来客製化自己的样式