vue中scoped的实现以及如何使用PostCSS转义css使其成为局部作用样式

scoped

我们在vue中写css样式时，有时候会在style标签上添加scoped属性，这样这个vue组件里的样式就不会污染到其他组件中了。

<style scoped>
</style>

但是这时候如果引用了第三方库，比如element、ant-design啥的，这时候修改他们的样式就需要增加额外的符号或命令去更改：
比如，我们可以使用deep，或者>>>符号：

<style lang="less" scoped>
.this-page {
    .this-page-content /deep/ .第三方组件class {
            // 巴拉巴拉
    }
}
</style>

<style lang="less" scoped>
.this-page {
    .this-page-content >>> .第三方组件class {
        // 巴拉巴拉
    }
}
</style>

我们知道了scoped的作用，那么，如果不使用scoped，我们怎么让css不互相污染呢？
——————在每个vue组件中命名一个独一无二的class，最好以组件为基本名称。然后将所有组件内的样式都被包裹于以组件为单位的独一无二的class中。

.page-class-name {
	.header {
	...
	}
	.content {
	...
	}
}

scoped的实现：

scoped属性的效果主要通过PostCSS转译实现，给dom添加了一个独一无二的动态属性
转义后：

<style>
    .example[data-v-5558831a] {
        color: red;
    }
</style>
<template>
    <div class="example" data-v-5558831a>hi</div>
</template>

postcss本身是一个node模块，可以将css文件解析为抽象语法树(AST)。PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。