Open lbwa opened 6 years ago
CSS
通过定义独有的 hash 属性的样式选择器来实现。
hash
在使用 vue-cli 的 webpack 模板开发 SPA 时,遇到导入的样式一部分生效,一部分不生效,且在 chrome 开发工具中,某些元素带有形如data-v-10578a49的属性。
data-v-10578a49
经查阅官方文档和vue-loader,和组件类注释,知道在单文件组件中有一个极易忽视的属性scoped,它的出现表示该单文件组件的样式,只限定于该单文件组件。就算样式中含有其他组件的样式,最后也会被忽略。
scoped
只要单文件组件中的样式带有scoped属性,那么在编译时,将为样式指定一个形如data-v-10578a49的属性(就像id一样)来指定其组件样式的单独作用域。
当需要在父组件中定义子组件(如定制某个基础组件的特定样式),使用深度选择器来 穿透 子组件的作用域。
.parent-component /deep/ .child-component color: #fff
深度选择器可写作 /deep/ 或者 >>>。
/deep/
>>>
github issue
vue-loader doc
vue 中的
CSS
作用域通过定义独有的
hash
属性的样式选择器来实现。经查阅官方文档和vue-loader,和组件类注释,知道在单文件组件中有一个极易忽视的属性
scoped
,它的出现表示该单文件组件的样式,只限定于该单文件组件。就算样式中含有其他组件的样式,最后也会被忽略。只要单文件组件中的样式带有
scoped
属性,那么在编译时,将为样式指定一个形如data-v-10578a49
的属性(就像id一样)来指定其组件样式的单独作用域。