Vue中引入bootstrap致使的CSS問題

最近在進行vue.js+webpack進行模塊化開發的時候，遇到一個奇怪的問題。

問題是這樣的：

1. 在main.js文件中引入bootstrap的js和css。

2. 本身寫了一個Header.vue模塊，其中的導航條使用的bootstrap的class和本身的class。

<ul class="navbar-nav my-navBar" id="my-navBar">

3. 在Header.vue中定義了一些ul li 和 a 標籤的樣式。

ul.my-navBar {
    margin-left: 200px;
    padding: 0;
    color: #333;
    float: left;
    /* max-height: 75px; */
    vertical-align: middle;
}

.my-navBar * {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
    font-family: "PingFangSC-Medium";
    font-weight: bold;
    color: #333333;
}

.my-navBar > li > a {
    display: block;
    text-decoration: none;
    padding: 36px 30px !important;
    border-bottom-style: solid;
    border-bottom-width: 4px;
    border-bottom-color: #fff;
    border-top-style: solid;
    border-top-width: 4px;
    border-top-color: #fff;
}

#my-navBar > li > a :hover {
    color: #f26e44;
}

.my-navBar > li > a :hover {
    color: #f26e44;
}

4. 經過npm run dev啓動項目並訪問，按我想要的效果正常顯示，本地的style覆蓋了bootstrap中的css。

5. 經過npm run build編輯後，部署到negix中，就不能正常顯示了。bootstrap的navbar-nav樣式覆蓋了我定義的一些樣式。也就是說，編譯後生成的app.css並非徹底和npm run dev時項目用的的css同樣。

生效的順序和範圍變了。

疑點：

我搜索了一些文章，說bootstrap的樣式覆蓋是由於CSS的優先級機制問題，我按照CSS優先級機制儘可能精確地設置了選擇器，可是效果並不理想。應爲並不清楚bootstrap的選擇器究竟是如何設置的，有些選擇器很是強大，一直覆蓋個人css。並且調試很是困難，由於在dev模式下是正常的，我只能不停地改css，build，copy到negix，刷線頁面……來調試。

雖然也有人說，用!important來暴力解決，可是首先這並不優雅，其次，有些竟然設置了!important也不起做用（what the fuck...）。

最後的解決辦法：

在模塊化vue開發中，<style>標籤能夠設置scoped屬性。若是設置了scoped屬性，這個style就是隻屬於本模塊，不會產生全局影響。按道理來講這樣的話，設置scope只會讓我自定義的style做用範圍更小，更不能覆蓋掉全局引用的bootstrap的css了。然而。。。我設置了scope以後，神奇的事情發生了。個人css在build後起做用了。

<style scoped>

build後生成的css，會帶有個data屬性：

.mi-navBar>li>a[data-v-af9ae36c] {
    display: block;
    text-decoration: none;
    padding: 36px 30px!important;
    border-bottom-style: solid;
    border-bottom-width: 4px;
    border-bottom-color: #fff;
    border-top-style: solid;
    border-top-width: 4px;
    border-top-color: #fff;
}

並且此次不知爲何，生成的css中，我自定義在<style scoped>中的css優先於bootstrap的css生效了。