所以,我在Vue.js中读到了here,您可以在 Select 器中使用/deep/>>>,以便创建应用于子组件内的元素的样式规则.但是,试图在我的样式中使用它,无论是在SCSS中还是在普通的旧CSS中,都不起作用.相反,它们被逐字发送到浏览器,因此没有任何效果.例如:

home.vue:

<style lang="css" scoped>
.autocomplete >>> .autocomplete-input 
{
// ...
}
</style>

generated css:

<style type="text/css">
.autocomplete >>> .autocomplete-input[data-v-2bda0c9a]
{
//...
}
</style>

what I want:

<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"
        }
    }
}
// ...

所以我的问题是,我怎么才能让这个>>>接线员正常工作呢?

我已经找到了this个答案,但我正是这么做的,它不起作用...

推荐答案

Vue 2

The following also works in Vue 3 but is deprecated.

Sass:%的用户使用::v-deep

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

Not using Sass:使用>>>

>>> .child-class {
    background-color: #000;
}

无论使用哪种语法,此组件的<style>标记必须为scoped:

<style scoped>

Vue 3 (Updated 1/19/2022)

在Vue 3中,::v-前缀现在是deprecated,我们不再需要>>>.我们可以使用统一:deep Select 器whether using Sass or not,但现在建议在 Select 器中使用括号.

Use 100

:deep(.child-class) {
    background-color: #000;
}

如果愿意,您还可以使用任何不推荐使用的语法


VUE 3新 Select 器

此外,在Vue 3中,有一个new feature用于组件,有一个<slot>用于设置传递的插槽内容的样式.

Slot content使用:slotted(.child-class)

:slotted(.slot-class) {
    background-color: #000;
}

最后,在Vue 3中,即使是scoped组件,也有new feature个用于注册全局样式:

Global styles%的用户使用:global(.my-class)

:global(.my-class) {
    background-color: #000;
}

对于任何语法,该组件的<style>标记必须是scoped:

<style scoped>

总结

在Vue 2中:

  • /deep/语法已弃用
  • 使用::v-deep与Sass,使用>>>而不使用Sass

在第3版中:

  • ::v-deep .child-class不受欢迎,取而代之的是:deep(.child-class)
  • ::v-前缀已弃用,而赞成使用:
  • >>>语法已弃用
  • /deep/语法已弃用
  • 有新的:slotted:global Select 器

对于每个版本/语法,该组件的<style>标记必须是scoped:

<style scoped>

Css相关问答推荐

收听类人猿上的输入验证事件

React呈现多个css文件

如何定位此下拉框的下拉面板

如何在JavaFX中设置分隔符的样式?

使用tailwind 将父div限制为其具有溢出的最短子级的高度

使用高图的背景大小渐变

:not() 适用于特定类中的所有 html 标签

2 列 UL,右列中的列表项数量为奇数?

是否有一个 CSS 可以根据字符的高度 for each 字符呈现可变高度?

使 MUI 自动完成打断长词以适合布局

当前的 html 标签没有发生两列布局

如何在变量中插入 SCSS 变量?

semantic-ui-react 使输入使用全宽度可用

用于替代渲染的 CSS 嵌套

滚动到该 div 后如何使 div 固定?

输入/按钮元素不会在 flex 容器中缩小

Flexbox 代码适用于除 Safari 之外的所有浏览器.为什么?

如何仅使用 CSS 制作网格(如方格纸网格)?

HTML5 和边框

背景图像可以大于 div 本身吗?