相关疑难解决方法(0)

所以,我在这里读到,在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"
        }
    }
}
// ...

所以我的问题是,如何使这个>>>运算符工作？

我已经找到了这个答案,但我正是这样做而且它不起作用......