在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题。但是想要修改还是有方法的:
1. 在不去掉scoped的情况下,在全局样式中覆盖,这种解法,有弊端,可能会污染全局样式。
2. 如果项目用到了预处理器,可以通过vue-loader提供的新写法 vue-loader 写法如下:
<style scoped
>
.a >>> .b { /* ... */ }
</style>
某些预处理器(如Sass)可能无法>>>
正确解析。在这些情况下,您可以使用/deep/
组合器 - 它是别名,>>>
并且完全相同。
<style scoped lang="scss">
.form {
background-color: #fff;
/deep/ .list{
font-size: 18px;
}
}
</style>
sass注意要用 /deep/ ,而无法使用 >>> 这个符号
原文地址:https://www.cnblogs.com/wangmaoling/p/9827428.html
时间: 2024-11-06 17:17:49