Bootstrap 4 Navbar Style 調整

此文記錄在 Vue 架構下調整 Bootstrap 4 Navbar style，讓它與 Bootstrap 3 Navbar 相同。調整項目如下 :

1. 點選 Dropdown Menu 時不出現藍色外框 ( 似乎是 Safari 上才會出現 )。
2. 被滑鼠指標 hover 的 Dropdown Menu 項目顯示藍底白字。
3. Active Navbar 項目顯示深底色白字。
4. Dropdown Menu 增加陰影。

下圖是 Bootstrap 4 Navbar 在 Safari 上點選 Dropdown Menu 時的擷圖 :

下圖是調整後的 Navbar 擷圖 :

1. 安裝 sass-loader 與 node-sass

npm install sass-loader
npm install node-sass

2. 在 main.js 檔案所在資料夾新增檔案 bootstrap.scss，檔案內容如下 :

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

$dropdown-link-hover-color: $light;
$dropdown-link-hover-bg:    $blue;
.dropdown-item{
  padding: .2rem 1.5rem !important;
}

.nav-link.active {
  background:$gray-900;
}

@media (min-width: 576px) {
  .navbar {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}
.navbar-nav .nav-item .nav-link {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;

  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.nav-item a.active.focus,
.nav-item a.active:focus,
.nav-item a.focus,
.nav-item a:active.focus,
.nav-item a:active:focus,
.nav-item a:focus {
    outline: 0;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: 0 0 0 0 rgba(0,123,255,0);
}

@import '~bootstrap/scss/bootstrap';

3. main.js 檔案調整如下 :

import Vue from 'vue'
import App from './App.vue'

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')