scoped的原理:
PostCSS在给组件中的所有dom生成独一无二的动态属性,作为唯一标识,和外部样式区分开
PS:
PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的,比如可以支持变量和混入(mixin),增加浏览器相关的声明前缀,或是把使用将来的 CSS 规范的样式规则转译(transpile)成当前的 CSS 规范支持的格式。从这个角度来说,PostCSS 的强大之处在于其不断发展的插件体系。目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要,开发出自己的 PostCSS 插件。
Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:
<style scoped lang="less">
.example{
color:red;
}
</style>
<div class="example">scoped测试案例</div></template>
转译后:
.example[data-v-5558831a] {
color: red;
}
<div class="example" data-v-5558831a>scoped测试案例</div></template>
这里主要写一个注意事项:
如果要对外部组件进行修改,需要把scoped去掉
这样才能实现回溯源头
否则,对外部组件修改的一些效果很有可能出不来
去掉之后,只是当前页面的样式修改了,并不会污染全部
穿透scoped的最简单方法是再写一个style不加scoped