vue.js scss >>> 失效的问题

vue中,使用scss后,样式穿透失效的问题

如题,vue项目中样式使用scss时,对于需要穿透的样式,使用 >>> 穿透可能会不生效,解决办法也很简单:

将样式由:

css 复制代码
<style lang="scss" scoped>
.a >>> .b {
  font-size: 24px;
}
</style>

修改为:

css 复制代码
<style lang="scss" scoped>
.a /deep/ .b {
  font-size: 24px;
}
</style>

或者:

css 复制代码
<style lang="scss" scoped>
.a ::v-deep .b {
  font-size: 24px;
}
</style>

官方文档中对此也进行了说明:Scoped CSS,或者喜欢英文版的:Scoped CSS 英文版

vue中的template模板中,style中分为全局样式和局部样式,区别是是否存在scoped 属性,当你的组件中的样式中添加了scoped属性,表明你组件中的样式值作用于当前的组件,与其他页面的样式互不相关。

样式互不影响看似很不错,但是有些时候会存在一些问题,尤其是引用了第三方的ui组件后,需要修改其样式,而又不想去除scoped属性造成组件之间的样式污染,就需要使用到样式穿透,一般情况下使用 >>> 即可。但是在前端工具越来越强大方便的具体,使用一些例如scss或者less就可能造成问题。

相关推荐
runnerdancer3 分钟前
解构shopify,从0到1实现落地页低代码编辑器
前端
苹果酱056720 分钟前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.21 分钟前
react和vue的区别之一
javascript·vue.js·react.js
WEI_Gaot22 分钟前
react19 的项目创建和组件使用
前端·react.js
资深前端外卖员25 分钟前
【nodejs高可用】前端APM应用监控方案 + 落地
前端·后端
OhBonsai26 分钟前
Shader 图像处理1_ToneMap技术处理过曝
前端
突头小恐龙26 分钟前
Chrome devTools - Lighthouse
前端·javascript·chrome
谦谦橘子26 分钟前
手写tiny webpack,理解webpack原理
前端·javascript·webpack
土豆125028 分钟前
Tailwind CSS 精通指南:提升效率、可维护性与最佳实践
前端·css
花生了什么树lll28 分钟前
面试中被问到过的前端八股(四)
前端·面试