vue style collections

[lbwa]

vue 中的 CSS 作用域

通过定义独有的 hash 属性的样式选择器来实现。

在使用 vue-cli 的 webpack 模板开发 SPA 时，遇到导入的样式一部分生效，一部分不生效，且在 chrome 开发工具中，某些元素带有形如data-v-10578a49的属性。

经查阅官方文档和vue-loader，和组件类注释，知道在单文件组件中有一个极易忽视的属性scoped，它的出现表示该单文件组件的样式，只限定于该单文件组件。就算样式中含有其他组件的样式，最后也会被忽略。

只要单文件组件中的样式带有scoped属性，那么在编译时，将为样式指定一个形如data-v-10578a49的属性（就像id一样）来指定其组件样式的单独作用域。

[lbwa]

父组件定义子组件样式

当需要在父组件中定义子组件（如定制某个基础组件的特定样式），使用深度选择器来 穿透 子组件的作用域。

.parent-component
  /deep/ .child-component
    color: #fff

深度选择器可写作 /deep/ 或者 >>>。

reference

• github issue

• vue-loader doc