CSS issues caused by introduction of bootstrap in Vue

Recently, a strange problem has been encountered in the development of Vue.js+webpack for modularization.

The problem is this:

1. Introduce bootstrap JS and CSS in the Main.js file.

2. I wrote a Header.vue module, where the navigation bar uses the bootstrap class and your own class.

<class= "Navbar-nav My-navbar"  ID= "My-navbar">

3. Some of the UL Li and a label styles are defined in the Header.vue.

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. Start the project and access it via NPM run Dev, as I want it to, and the local style overrides the CSS in bootstrap.

5. After editing with NPM run build, the deployment to Negix is not displayed properly. Bootstrap's Navbar-nav style overrides some of the styles I've defined. That is, the APP.CSS generated after compilation is not exactly the same as the CSS used by the NPM run Dev project.

The order and scope of the entry into force have changed.

Doubt:

I searched for some articles, saying that the bootstrap style overlay is due to the priority mechanism of CSS, I set the selector as precisely as possible, but the effect is not ideal. It should be unclear how the selector for bootstrap is set, some selectors are very powerful and have been covering my CSS. and debugging is very difficult, because in the dev mode is normal, I can only keep changing css,build,copy to Negix, Brush line page ... To Debug.

Although it is also said that the use of!important to solve the violence, but first this is not elegant, and secondly, some actually set up the!important also does not work (what the fuck ... ）。

The Final Solution:

The scoped property can be set in the,<style> tab in Modular Vue development. If the scoped attribute is set, this style is only part of this module and does not have a global impact. In the sense of this, setting scope only makes my custom style more scoped, not to overwrite the bootstrap CSS of the global reference. However... After I set the scope, something magical happened. My CSS works after the build.

<style scoped>

The CSS generated after build will have a data property:

 .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 ;} 

And this time somehow, in the generated CSS, I customize the CSS in <style scoped> to take precedence over Bootstrap's CSS.

CSS issues caused by introduction of bootstrap in Vue