scss文件中使用深度选择器/deep/报错 Expected selector

最新推荐文章于 2025-10-24 16:35:34 发布
原创 最新推荐文章于 2025-10-24 16:35:34 发布 · 3.3w 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在SCSS中使用/deep/作为深度选择器可能会遇到错误，本文介绍了在Vue项目中如何正确使用::v-deep替代/deep/或>>>来解决预处理器如Sass的兼容性问题。

记得sass中使用/deep/没问题，但是在scss中使用/deep/报错了。

找到vue官网关于深度选择器是这样说的：

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

于是用 ::v-deep 就可以了

https://vue-loader.vuejs.org/zh/guide/scoped-css.html

uniapp中报错： sassError: expected selector. /deep/
前端-尔嵘
07-01 671
在Vue的SCSS样式中，使用/deep/选择器会导致语法错误。建议改用::v-deep替代，正确写法如：::v-deep .ant-modal-close{color:#fff;}，它能解决样式穿透问题，同时保持SCSS的语法正确性。
解决Vue Scss中/deep/无效问题
News777的博客
04-25 4584
问题 Syntax Error: SassError: expected selector. ╷ 850 │ /deep/ .el-table__body{ │ ^ 解决 在vue中，深度选择器>>>,/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep
前端学习笔记（13）-常用Scss
JiangZhengyang7的博客
01-28 3147
1.嵌套 2.变量 3.插值语句 4.混合 5.其他常用指令 6.常用声明 附：深度选择器:deep&&scoped
调整为 dart-sass 支持的语法，将深度选择器/deep/调整为::v-deep
最新发布
liyuxiaomeng的博客
10-24 307
解决方法：将/deep/改为::v-deep。
单独修改组件库样式/样式穿透/深度选择器/scoped作用
TKY666的博客
11-09 4980
Ant Design of Vue、Element UI、Vant等各种组件库固然好用，但官方给定的样式却不符合自家ui的设计风格，我们想要修改却又无从下手，改了却又产生连锁反应，所有页面都会受影响。在实际项目开发中或在面试中常会遇到如何单独修改当前页面单个组件样式，并且不影响当前页面其他组件样式。解决方案：一、修改组件库样式方法首先来介绍此事件的主角 --- 深度选择器。
CSS深度选择器(穿透)
cs007711的博客
02-24 2181
问题：[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(＜inner-selector＞)CSS深度选择器(穿透)1、stylus的样式穿透 使用>>>（不推荐）
关于SCSS中使用深度选择器
六耳石猴的博客
07-27 7286
最近 开发过程中遇到一个问题，当对element-ui的样式进行覆写时，由于样式优先级关系导致自己写的样式"padding: 0"无法覆盖element的组件样式。 在SCSS中使用::v-deep的话虽然样式覆写可以成功，但是该类内部的字标签类样式会失效。 .class1{ ::v-deep .class2{ p{} } } 如上，class2的 样式可以覆写，但是内部的p标签选择器的样式会失效。解决方案是可以把class2的覆写单独提炼出来再加上深度选择器。 .class1{ .class2
scss|sass使用/deep/报错 Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError
肥晨开发的学习之路
04-04 1376
scss不支持这个选择器。/deep/ 变:deep。
vscode 中使用vue2在写入/deep/ 时出现at-rule or selector expected但是不影响运行结果，只是编译器报错
07-19
在 Vue2 项目中，当你在 `<style scoped>` 中使用 `/deep/` 进行样式穿透时，VSCode 会显示 **"at-rule or selector expected"** 警告（如图）。这是 VSCode 内置 CSS 验证器的误报，不会影响实际运行效果，但会干扰...
vscode 中在写入/deep/ 时出现at-rule or selector expected但是不影响运行结果，只是编译器报错
07-19
我们正在解决在VSCode中使用`/deep/`选择器时出现的"at-rule or selector expected"错误。这个错误通常是由于VSCode的CSS验证器（通常来自内置的CSS语言服务）不支持这种非标准的深度选择器语法。虽然这个错误不影响...
SassError: expected selector报错原因可能是/deep/
qq_44890362的博客
08-17 3721
3.::v-deep与/deep/的加载速度不同，::v-deep的加载速度更快。1.如果项目使用的是css原生样式，那么可以直接使用/deep/。2.如果使用了预处理器都可以使用::v-deep。
scss中深度选择器如何使用
2401_83036723的博客
02-29 6370
以上两种方式正常情况下使用都没有问题，但在scss，less，sass等解析器中，>>>，/deep/可能都无法使用，这种情况可以采用 ::v-deep。在开发过程中，可能会遇到scss中样式不会执行，这时候我们就会用到深度选择器 /deep/在/deep/ 使用以上写法编译时，出现报错或者警告可以使用 ::v-deep。通常情况下，写样式穿透都是用 >>> ，或者 /deep/
scss深度选择器_Vue style 深度作用选择器 >>> 与 /deep/（sass/less）
weixin_34618077的博客
01-25 1598
已知问题vue组件编译后，会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局，但如果你引用了第三方组件：默认只会对组件的最外层(div)加入这个 [data-v-xxxx] 属性，但第二层开始就没有效果了。如图所示：第一层还有 data-v-17bb9a05, 但第二层的 .weui-cells 就没有...
CSS中的深度选择器 deep 详解
exlink2012的专栏
12-19 3611
在Vue等框架中，当我们使用组件作用域样式（Scoped CSS）时，有时需要修改子组件内部的样式。这时就需要用到深度选择器。深度选择器是在使用组件作用域样式时的重要工具，它让我们能够在不破坏组件封装的前提下修改子组件样式。但应该谨慎使用，优先考虑其他更好的样式解决方案。
css深度选择器 /deep/
zhou_xiaozhou的博客
01-10 8892
css深度选择器 /deep/
css 深度选择器（穿透选择器）
XH1234234的博客
10-20 1852
引入第三方组件库（如element-ui、element-plus），修改第三方组件库的样式样式文件中使用了 scoped 属性，但是为了每个组件之间不相互影响所以不能去除scoped 属性，此时需要用样式穿透选择器来修改第三方组件的样式，以下罗列了三种方法。适用与 css、stylus，不太推荐，可能会有问题。适用于 scss、less。
scss深度选择器修改第三方样式（::v-deep）
qq_38969618的博客
06-15 3472
.my-custom-form ::v-deep .el-select__tags{ top: 72%; } .my-custom-form ::v-deep .el-input__suffix{ top: 20%; }
css,less,scss中的深度选择器，结合elementUi使用
LiuJia20010827的博客
07-07 1748
css中深度选择器用到的是 >>>加类名 可以很方便的找到自己想要修改的样式。lees中用到 /deep/ 加类名。scss中用到::v-deep 加类名。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值