因此,我在这里已经读到,在Vue.js中,可以使用/deep/或>>>在选择器中创建适用于子组件内部元素的样式规则。但是,无论是在SCSS还是普通的旧CSS中,尝试以我的样式使用它均无效。而是将它们原样发送到浏览器,因此无效。例如:
/deep/
>>>
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如下所示:
vue-loader
// ... { test: /\.vue$/, loader: "vue-loader", options: { loaders: { scss: "vue-style-loader!css-loader!sass-loader" } } } // ...
所以我的问题是,如何让该>>>操作员工作?
我已经找到了这个答案,但我确实在这样做,而且行不通…
采用::v-deep
::v-deep
可接受的答案不适用于scopedSASS / SCSS,但可以::v-deep:
scoped
::v-deep .child-class { background-color: #000; }
如果您不使用SASS / SCSS,请使用以下>>>语法:
>>> .child-class { background-color: #000; }
使用::v-deep或时>>>,<style>此组件的标签必须为scoped:
<style>
<style scoped>
编辑(10/1/2019):额外信息 :
sass
dart-sass
node-sass