因此,我在这里已经读到,在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"
}
}
}
// ...
所以我的问题是,如何让该>>>
操作员工作?
我已经找到了这个答案,但我确实在这样做,而且行不通…
采用::v-deep
可接受的答案不适用于scoped
SASS / SCSS,但可以::v-deep
:
::v-deep .child-class {
background-color: #000;
}
如果您不使用SASS / SCSS,请使用以下>>>
语法:
>>> .child-class {
background-color: #000;
}
使用::v-deep
或时>>>
,<style>
此组件的标签必须为scoped
:
<style scoped>
编辑(10/1/2019):额外信息 :
/deep/
语法被弃用sass
并且dart-sass
不支持/deep/
,只有node-sass
不/deep/
(因为它不支持node-sass
)问题内容: 我是Angular 4的新手,所以谁能解释在Angular 4中的使用方式和位置? 实际上,我想从父组件覆盖子组件的某些CSS属性。此外,它在IE11上受支持吗? 问题答案: 通常, 可使用组合器将样式强制降低到 。这个选择器有一个别名>>>,现在还有另一个叫做:: ng-deep的别名。 由于 已弃用,建议使用 例如: 和 它将应用于子组件
本文向大家介绍如何在Vue.JS中使用图标组件,包括了如何在Vue.JS中使用图标组件的使用技巧和注意事项,需要的朋友参考一下 原文链接:https://gist.github.com/Justineo/fb2ebe773009df80e80d625132350e30 本文对原文进行一次翻译,并从React开发者的角度简单地做了一些解读。 此文不包含字体图标和SVG sprite。仅在此讨论允许用
问题内容: 我一直在阅读此选择器,并得到相互矛盾的答案。 在:/ deep /和::shadow在CSS选择器中是什么意思? 我们看: 正如Joel H.在评论中指出的那样,Chrome自此之后就弃用了/ deep /组合器,并在IE中给出了语法错误。 我们看: / deep /不再存在,所以我认为我们不应该支持它。>>>是新版本,可能应该支持 我们看: / deep /选择器还具有别名>>>。我
有没有人知道我怎么在工会上使用碎片?我已经看到了React的文档(https://www.apollographql.com/docs/React/advanced/fragments/#fragment-on-unions-and-interfaces),但对Vue的介绍不多。我有一个返回两个片段的查询,都带有__TypeName。 当vue应用程序运行时,我收到一个错误:“您正在查询中使用片段
本文向大家介绍如何在 Vue.js 中使用第三方js库,包括了如何在 Vue.js 中使用第三方js库的使用技巧和注意事项,需要的朋友参考一下 在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你
只含有运行时的构建版本 如果你熟悉 Vue.js,你应该知道 Vue.js 有两种构建版本: 运行时 + 编译器 与 只包含运行时。它们之间的区别在于编译器是否需要能够在运行时编译 template 选项。由于运行时构建版本比完整版本的构建版本轻约 30%(Vue 官方估算),为了更好的性能和更小的代码体积,Weex 集成的是运行时版本的 Vue。 具体来说,差异如下: 定义组件时不支持 temp