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 标签的样式。
<-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;
bootstrap项目
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优先级机制尽量精确地设置了选择器，但是效果并不理想。应为并不清楚bootstrap的选择器到底是如何设置的，有些选择器⾮常强⼤，⼀直覆盖我的css。⽽且调试⾮常困难，因为在dev模式下是正常的，我只能不停地改css，build，copy到negix，刷线页⾯……来调试。
虽然也有⼈说，⽤!important来暴⼒解决，但是⾸先这并不优雅，其次，有些居然设置了!important也不起作⽤（what ）。
最后的解决办法：
在模块化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⽣效了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。