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>hidiv>
template>

postcss自体はnodeモジュールであり,cssファイルを抽象構文ツリー(AST)に解析できる.PostCSSは、1つのコンポーネント内のすべてのdomにユニークなダイナミックプロパティを追加し、CSSセレクタに対応するプロパティセレクタを追加してコンポーネント内のdomを選択します.これにより、スタイルがそのプロパティを含むdom-コンポーネント内部のdomにのみ作用します.