css - 通过添加父类，作用域 CSS 和 "scope"之间的区别

Question

当使用 vue、vue-loader 和官方样板构建应用程序时，我注意到 scoped css 用于将 CSS 限制为当前组件。我不明白这有什么意义。当我觉得需要它时，我总是通过在包装类中定义它来“限定”css。

例如在 SASS 中:

.some-module {
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
}

那么我使用作用域 CSS 有什么好处呢？或者它只是实现相同目标的另一种方法？

Answer 1

如果你在全局文件中添加 css，你可以导入任何 where ，但是当你使用作用域 css 时，它只会将样式与相应的组件相关联。

请引用https://vue-loader.vuejs.org/en/features/scoped-css.html了解更多信息

作用域 CSS

当标签具有 scoped 属性时，其 CSS 将仅应用于当前组件的元素。这类似于 Shadow DOM 中的样式封装。它带有一些注意事项，但不需要任何 polyfill。它是通过使用 PostCSS 转换以下内容来实现的:

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

<template>
  <div class="example">hi</div>
</template>

进入以下:

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>