After doing some research, I came across this article explaining how in Vue.js, you can use either /deep/ or >>> in a selector to apply style rules to elements inside child components. However, when trying to implement this in my styles using SCSS or plain CSS, it doesn't seem to work as expected. Instead of applying the styles as intended, they are being sent directly to the browser without any effect. For example:
home.vue:
<style lang="css" scoped>
.autocomplete >>> .autocomplete-input
{
// ...
}
</style>
generated css:
<style type="text/css">
.autocomplete >>> .autocomplete-input[data-v-2bda0c9a]
{
//...
}
</style>
desired result:
<style type="text/css">
.autocomplete[data-v-2bda0c9a] .autocomplete-input
{
//...
}
</style>
I've also shared my webpack configuration related to vue-loader:
// ...
{
test: /\.vue$/,
loader: "vue-loader",
options: {
loaders: {
scss: "vue-style-loader!css-loader!sass-loader"
}
}
}
// ...
So my main question is, how can I make the >>> operator work properly?
Although I came across this solution, implementing it isn't yielding the desired outcome for me...