vue中改写子组件样式

前言:最近在用vue cli3写项目,有时需要微调子组件样式

  • 正常情况下,通过>>> 或/deep/ (深度作用选择器)来进行变更。参考https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8
  • 不过,像 Sass 、scss之类的预处理器无法正确解析 >>>(我的项目中使用的刚好是scss,控制台显示不会引入改写样式),按照正常来说,可以使用 /deep/。但是,报错!!!(如图,有可能是新版vue的缘故,我之前没有遇到这个问题)


    尴尬.png
  • 最后,发现把/deep/ 改成 ::v-deep就可以正确编译并改写(如图)


    改写.png

    控制台.png

因为好多参考文档没有提到::v-deep,之前并不知道,此篇以做记录~~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容