标签：自己的 vertica uil height trap one block 模块化 weight
最近在进行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生效了。
标签：自己的 vertica uil height trap one block 模块化 weight
原文地址：https://www.cnblogs.com/xxnn/p/9257880.html
