zjffun blog

Vue scoped CSS

更新于 写于 VueCSS

Vue scoped CSS will not influence global, but may influenced by global. Because the scoped CSS will add a unique attribute and retain original selector name.

For example, if you have a scoped style like this:

vue
<template>
  <div class="example">Hello World</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

and have a global style like this:

css
.example {
  background: yellow;
}

.example.example.example {
  color: blue;
}

The text background will be yellow, because it has example class. The text color will be blue, because the global style is more specific than the scoped style.

Using CSS modules can solve this problem.