web-dev-qa-db-ja.com

Vue.jsで/ deep /または>>>を使用するにはどうすればよいですか？

だから、私は読んだ ここ Vue.jsでは、セレクターで/deep/または>>>を使用して、子の中の要素に適用するスタイルルールを作成できるコンポーネント。ただし、SCSSであろうと単純な古いCSSであろうと、私のスタイルでこれを使用しようとしてもうまくいきません。代わりに、ブラウザにそのまま送信されるため、効果はありません。例えば：

home.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>

vue-loaderに関連する私のwebpack設定は次のようになります。

// ...
{
    test: /\.vue$/,
    loader: "vue-loader",
    options: {
        loaders: {
            scss: "vue-style-loader!css-loader!sass-loader"
        }
    }
}
// ...

私の質問は、この>>>演算子をどのように機能させるかです。

私はすでに this answerを見つけましたが、私はそれを正確にやっていて、うまくいきません...

cssnode.jswebpacksassvue.js
18
laptou

この構造を持つVueのスコープ付きSCSSスタイルシートで/ deep /を正常に使用しました：

.parent-class {
  & /deep/ .child-class {
    background-color: #000;
  }
}

編集：/ deep /は非推奨になりました。機能しない場合は、:: v-deepを説明する他の回答を参照してください。

17
arapl3y

受け入れられた答えは、スコープ付きSCSSで機能していませんでしたが、これは時々機能しました：

.parent-class {
  &::v-deep .child-class {
    background-color: #000;
  }
}

そして、これは通常しました（親クラスを省略します）：

::v-deep .child-class {
  background-color: #000;
}
25
Dan

/deep/はすぐに廃止されます

Vue Githubリファレンス- https://github.com/vuejs/vue-loader/issues/91

スコープのcomponent's cssは、deep selectorを使用して変更できます

::v-deepは廃止されるため、この場合は/deep/を使用します。

リファレンス- ディープセレクター

chromeまたは任意のブラウザコンソールでelementを使用して変更するレンダリングされたdevtoolsのクラスを検査するだけです。

次に、componentを使用して、それを変更します

<style scoped>
::v-deep .custom-component-class {
   background: red; //
}
</style>
9
Satyam Pathak