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生效了。