Vue 3 使用Bootstrap 4 並用scss全域自訂顏色

目前使用Vue Cli建置專案已經可以選擇使用Vue 3。

這裡不使用Bootstrap-vue,因為它目前還不支援Vue 3,而且我個人覺得它有點肥,還有一個原因是,這樣使用Bootstrap比較貼近原本的Html、css語法,有些範例樣板比較容易複製貼上,不必遵循Vue組件的語法。

因此我們用較原始的方式安裝Bootstrap,使用下面指令安裝,因為Bootstrap本身有依賴jquery,因此這樣的專案會變成Vue和jquery共存。

npm install –save bootstrap jquery popper.js

安裝完後在main.js下引入Bootstrap:

import 'bootstrap';

因為等等接著會使用scss來引入bootstrap原本的css,所以在main.js不必另外引入,如果不使用scss引入則加入這行

import 'bootstrap/dist/css/bootstrap.min.css';

接著如果要使用scss來自定全部的顏色,要先安裝sass-loader

npm install -D sass-loader sass

然後新增一個檔案在assets/custom.scss

$primary: blue;
$danger: red;

@import "bootstrap";

最後要在main.js引入這個scss,必須在引入Bootstrap之前,這樣就大功告成了。

以下為main.js完整程式大概會像這樣。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import '@/assets/custom.scss';
import 'bootstrap';

createApp(App).use(store).use(router).mount('#app');

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *