Итак, я прочитал здесь, что в 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>
Моя конфигурация webpack, относящаяся к vue-loader
выглядит следующим образом:
// ...
{
test: /\.vue$/,
loader: "vue-loader",
options: {
loaders: {
scss: "vue-style-loader!css-loader!sass-loader"
}
}
}
// ...
Итак, мой вопрос, как мне заставить этот оператор >>>
работать?
Я уже нашел этот ответ, но я делаю именно это, и он не работает...