それで、私は読んだここVue.js では、セレクターで/deep/またはを使用し>>>て、子コンポーネント内の要素に適用されるスタイル ルールを作成できます。ただし、SCSS または従来の CSS のいずれであっても、これをスタイルで使用しようとしても機能しません。代わりに、それらはブラウザーにそのまま送信されるため、効果がありません。例:
ホーム.vue:
<style lang="css" scoped>
.autocomplete >>> .autocomplete-input
{
// ...
}
</style>
生成された CSS:
<style type="text/css">
.autocomplete >>> .autocomplete-input[data-v-2bda0c9a]
{
//...
}
</style>
私が欲しいもの：
<style type="text/css">
.autocomplete[data-v-2bda0c9a] .autocomplete-input
{
//...
}
</style>
私の webpack 構成はvue-loader次のようになります。
// ...
{
test: /\.vue$/,
loader: "vue-loader",
options: {
loaders: {
scss: "vue-style-loader!css-loader!sass-loader"
}
}
}
// ...
そこで質問なのですが、この>>>演算子を動作させるにはどうしたらいいのでしょうか?
すでに見つけたこれ答えですが、まさにそれをやっているのですが、うまくいきません...
ベストアンサー1
2.0 - 2.6 の場合
以下は Vue 3 でも動作しますが、非推奨です。
サス： 使用::v-deep
::v-deep .child-class {
background-color: #000;
}
ないSass を使用する: 使用>>>
>>> .child-class {
background-color: #000;
}
どちらの構文でも、<style>このコンポーネントのタグは次のようになりますscoped。
<style scoped>
Vue 3 (および Vue 2.7)
Vue 3では、::v-プレフィックスは非推奨はもう必要ありません>>>。統合:deepセレクタを使うことができますSassを使用するかどうかただし、セレクターでは括弧を使用することをお勧めします。
使用:deep(.child-class)
:deep(.child-class) {
background-color: #000;
}
これは Vue 2.7 (最終 Vue 2 リリース) でも動作します。
Vue 3 の新しいセレクター
さらに、Vue 3では、新機能<slot>渡されたスロット コンテンツのスタイル設定を可能にする を持つコンポーネントの場合。
スロットコンテンツ 使用:slotted(.child-class)
:slotted(.slot-class) {
background-color: #000;
}
そして最後に、Vue 3では、新機能コンポーネントからでもグローバル スタイルを登録するにはscoped:
グローバルスタイル 使用:global(.my-class)
:global(.my-class) {
background-color: #000;
}
どのような構文でも、<style>このコンポーネントのタグは次のようになりますscoped。
<style scoped>
まとめ
Vue 2の場合:
- この
/deep/構文は非推奨です - Sass と一緒に使用
::v-deep、>>>Sass なしで使用
Vue 3の場合:
::v-deep .child-classは廃止され、:deep(.child-class)- プレフィックス
::v-は廃止され、代わりに: - この
>>>構文は非推奨です - この
/deep/構文は非推奨です - 新しいセレクター
:slottedがあります:global
どのバージョン/構文でも、<style>このコンポーネントのタグは次のようになりますscoped。
<style scoped>