[Vue] The difference between CSS and CSS modules Scoped

is a solution to the CSS global scope problem (style conflict (pollution)). 1.Scoped CSS

When a <style> tag has an scoped attribute, it is equivalent to adding a unique attribute to the element to differentiate it .

 <  style  scoped  >  .example {color:red;}  </ style  >  <  template   >  <  div  class  = "Example"  >  hi</ div  >  </ template  >  

< style > . example[data-v-f3f3eg9] {  color:red;} </ style > < Template >  <  class= "Example"  data-v-f3f3eg9>hi</ Div > </ Template >

2.CSS Modules

by give the style name a hash string suffix , Implementing a style-compiled style in a specific scope context is globally unique.

 <  template  >  <  p  :class  = "$style. Gray"  >   Im Gray  </ p  >  </ template  >  <  style  module  >  .gray {color:gray;}  </ style  >  

The results of using the module are compiled as follows:

<class= "Gray_3fi3s6uz">Im Gray</p>  . Gray_3fi3s6uz {color:gray;}

Thus, the CSS module directly replaces the class name, excluding the possibility of user setting the class name affecting the component style.

Recommended use of CSS Modules

See the Official document: https://vue-loader.vuejs.org/zh/guide/scoped-css.html# mixed local and global styles

[Vue] The difference between CSS and CSS modules Scoped