CSS 我如何在 Vue.js 中使用 /deep/ 或 >>> ？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48032006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use /deep/ or >>> in Vue.js?
提问by laptou
So, I've read herethat in Vue.js, you can use /deep/or >>>in a selector in order to create style rules that apply to elements inside of child components. However, attempting to use this in my styles, whether in SCSS or in plain old CSS, doesn't work. Instead, they are sent to the browser verbatim, and therefore have no effect. For example:
所以，我在这里读到，在 Vue.js 中，您可以在选择器中使用/deep/或>>>来创建适用于子组件内部元素的样式规则。但是，尝试在我的样式中使用它，无论是在 SCSS 中还是在普通的旧 CSS 中，都不起作用。相反，它们被逐字发送到浏览器，因此没有任何效果。例如：
home.vue:
家庭.vue：
<style lang="css" scoped>
.autocomplete >>> .autocomplete-input
{
// ...
}
</style>
generated css:
生成的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>
My webpack configuration pertaining to vue-loaderlooks like this:
我的 webpack 配置vue-loader如下所示：
// ...
{
test: /\.vue$/,
loader: "vue-loader",
options: {
loaders: {
scss: "vue-style-loader!css-loader!sass-loader"
}
}
}
// ...
So my question is, how do I get this >>>operator to work?
所以我的问题是，我如何让这个>>>运营商工作？
I've already found thisanswer, but I'm doing exactly that and it doesn't work...
我已经找到了这个答案，但我正在这样做，但它不起作用......
回答by Dan
Use ::v-deep
用 ::v-deep
The accepted answer wasn't working for me in scopedSASS/SCSS, but ::v-deepdid:
接受的答案在scopedSASS/SCSS 中对我不起作用，但是::v-deep：
::v-deep .child-class {
background-color: #000;
}
If you're not using SASS/SCSS, use the >>>syntax:
如果您不使用 SASS/SCSS，请使用以下>>>语法：
>>> .child-class {
background-color: #000;
}
With either ::v-deepor >>>, the <style>tag for this component must be scoped:
使用::v-deep或>>>，<style>该组件的标签必须是scoped：
<style scoped>
EDIT (10/1/2019): Extra info:
编辑（10/1/2019）：额外信息：
- The
/deep/syntax is being deprecated sassanddart-sassdo not support/deep/, onlynode-sassdoes- Vuetify 2 does not support
/deep/(since it does not supportnode-sass)
- 该
/deep/语法被弃用 sass并且dart-sass不支持/deep/，只有node-sass不- Vuetify 2 不支持
/deep/（因为它不支持node-sass）
回答by arapl3y
I've successfully used /deep/ in Vue's scoped SCSS stylesheets with this structure:
我已经成功地在 Vue 的 SCSS 样式表中使用了 /deep/ 这种结构：
.parent-class {
& /deep/ .child-class {
background-color: #000;
}
}
Edit: /deep/ is being deprecated, if it no longer works for you please refer to the other answer that explains ::v-deep
编辑：/deep/ 已被弃用，如果它不再适合您，请参阅解释 ::v-deep 的其他答案
回答by Satyam Pathak
Avoid using /deep/and instead use ::v-deep
避免使用/deep/而是使用::v-deep
Any scoped component'scss can be changed by using deep selectorbut sooner /deep/will get deprecated
任何范围的component'scss 都可以通过使用进行更改，deep selector但很快/deep/就会被弃用
Vue Github reference - https://github.com/vuejs/vue-loader/issues/913
Vue Github 参考 - https://github.com/vuejs/vue-loader/issues/913
Use::v-deepin this case,and avoid deprecated /deep/
::v-deep在这种情况下使用，并避免弃用/deep/
Reference - Deep Selector
参考 -深度选择器
Just inspect class of the rendered elementwhich you want to modify using devtoolsin chrome or any browser console.
只需在 chrome 或任何浏览器控制台中检查element要修改的渲染类devtools。
Then, In you consuming component, modify it
然后，在你消费中component，修改它
<style scoped>
::v-deep .custom-component-class {
background: red; //
}
</style>
回答by Kristiyan Tsvetanov
For me, the only thing that worked was
对我来说，唯一有效的是
<style scoped>. // sass and scss didn't work
>>> .deep-selector {
...
}
</style>
