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

最新推荐文章于 2025-03-16 19:56:37 发布
最新推荐文章于 2025-03-16 19:56:37 发布
阅读量3.3w 收藏 16
点赞数 22
分类专栏： 问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lfl976/article/details/104894147
版权

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

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

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

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

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

Vue3 关于scss预编译中:deep 其中的deep如何理解
专注基础架构领域
07-12 2407
在SCSS预处理器中，:deep是一个伪类器，用于一个元素的所有后代元素，无论它们在DOM结构中的层级深度如何。换句话说，:deep器是一个类似于CSS中的后代器，但是它可以不考虑嵌套层级的限制，而是选择所有符合条件的后代元素。例如，使用以下可以选择所有.container元素下的所有span需要注意的是，:deep选择器已经被标记为弃用的选择器，建议使用/deep/或者::v-deep代替。相关问题。
解决Vue Scss中/deep/无效问题
News777的博客
04-25 4454
问题 Syntax Error: SassError: expected selector. ╷ 850 │ /deep/ .el-table__body{ │ ^ 解决 在vue中，深度选择器>>>,/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep
CSS深度选择器(穿透)
cs007711的博客
02-24 2028
问题：[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(＜inner-selector＞)CSS深度选择器(穿透)1、stylus的样式穿透 使用>>>（不推荐）
【uni-app运行错误】SassError: expected selector @import “@/uni.scss“；
jastalented的博客
03-16 451
安装完成，重新npm run dev运行项目就好了。如此就能正常运行项目 了。
关于SCSS中使用深度选择器
六耳石猴的博客
07-27 7162
最近 开发过程中遇到一个问题，当对element-ui的样式进行覆写时，由于样式优先级关系导致自己写的样式"padding: 0"无法覆盖element的组件样式。 在SCSS中使用::v-deep的话虽然样式覆写可以成功，但是该类内部的字标签类样式会失效。 .class1{ ::v-deep .class2{ p{} } } 如上，class2的 样式可以覆写，但是内部的p标签选择器的样式会失效。解决方案是可以把class2的覆写单独提炼出来再加上深度选择器。 .class1{ .class2
SassError: expected selector报错原因可能是/deep/
qq_44890362的博客
08-17 3452
3.::v-deep与/deep/的加载速度不同，::v-deep的加载速度更快。1.如果项目使用的是css原生样式，那么可以直接使用/deep/。2.如果使用了预处理器都可以使用::v-deep。
scss中深度选择器如何使用
2401_83036723的博客
02-29 5463
以上两种方式正常情况下使用都没有问题，但在scss，less，sass等解析器中，>>>，/deep/可能都无法使用，这种情况可以采用 ::v-deep。在开发过程中，可能会遇到scss中样式不会执行，这时候我们就会用到深度选择器 /deep/在/deep/ 使用以上写法编译时，出现报错或者警告可以使用 ::v-deep。通常情况下，写样式穿透都是用 >>> ，或者 /deep/
Vue项目/deep/ 深选择器版本不兼容报错
weixin_63729549的博客
07-11 707
Sass（Syntactically Awesome Stylesheets）是一种CSS预处理器，它扩展了CSS语言，增加了诸如变量、嵌套规则、混合（mixins）、继承、函数等功能，使得编写CSS变得更加高效和有组织性。深选择器在Web开发中主要用于穿透组件的 Scoped CSS 层次，以达到修改子组件样式的目的。深选择器的主要用途是在保持组件样式封装的同时，允许外部组件对内部元素的样式进行一定的定制或覆盖，这对于复杂的UI组件库尤其有用。，它是Vue推荐的写法，并且在Sass环境下也能正常编译。
router/router-static.js @ ./src/main.js @ multi ./node_modules/.store/webpack-dev-server@3.11.3/node_modules/webpack-dev-server/client?http://10.10.2.59:8083&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js error in ./src/views/modules/news/list.vue?vue&type=style&index=0&id=ce2d1bb0&lang=scss&scoped=true Syntax Error: SassError: expected selector. ╷ 13 │ & /deep/ el-pagination__sizes{ │ ^ ╵ D:\other\springboot291_yiqingfangkong-master\xiaoyuanyiqingfangkong\src\main\resources\admin\admin\src\views\modules\news\list.vue 13:7 root stylesheet @ ./node_modules/.store/vue-style-loader@4.1.3/node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/.store/css-loader@3.6.0/node_modules/css-loader/di st/cjs.js??ref--9-oneOf-1-1!./node_modules/.store/vue-loader@15.11.1/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/.store/postcss-loader@ 3.0.0/node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/.store/sass-loader@8.0.2/node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_mod ules/.store/cache-loader@4.1.0/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/.store/vue-loader@15.11.1/node_modules/vue-loader/lib??vue-loader-options!./src/views/modules/news/list.vue?vue&type=style&index=0&id=ce2d1bb0&lang=scss&scoped=true 4:14-727 15:3-20:5 16:22-735 @ ./src/views/modules/news/list.vue?vue&type=style&index=0&id=ce2d1bb0&lang=scss&scoped=true @ ./src/views/modules/news/list.vue @ ./src/router/router-static.js @ ./src/main.js @ multi ./node_modules/.store/webpack-dev-server@3.11.3/node_modules/webpack-dev-server/client?http://10.10.2.59:8083&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js error in ./src/views/modules/shangbao/list.vue?vue&type=style&index=0&id=423eea70&lang=scss&scoped=true Syntax Error: SassError: expected selector. ╷ 13 │ & /deep/ el-pagination__sizes{ │ ^ ╵ D:\other\springboot291_yiqingfangkong-master\x
最新发布
04-03
根据用户提供的引用信息，问题出现在Nuxt或Vue项目中使用SCSS预编译时，尝试使用/deep/进行样式穿透，但编译器报错。用户提供的示例代码是： /deep/ .el-input__inner { border: 1px solid $main-color !important...
SassError: expected selector
03-11
'SassError: expected selector' 错误通常源于 Sass 或 SCSS 文件中的语法错误或选择器定义不当，这使得 Sass 编译器无法正常解析文件内容[^1]。具体来说，在 Vue 项目中使用样式穿透 `/deep/` 报错的情况表明该写法...
vue项目启动有关sass与sass loader处理
代码青春
02-24 871
场景一： scss文件中使用深度选择器/deep/报错 Expected selector 记得sass中使用/deep/没问题，但是在scss中使用/deep/报错了。 找到vue官网关于深度选择器是这样说的： 有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。 于是用 ::v-deep 就可以了 https://blog..
CSS中的深度选择器 deep 详解
exlink2012的专栏
12-19 2305
在Vue等框架中，当我们使用组件作用域样式（Scoped CSS）时，有时需要修改子组件内部的样式。这时就需要用到深度选择器。深度选择器是在使用组件作用域样式时的重要工具，它让我们能够在不破坏组件封装的前提下修改子组件样式。但应该谨慎使用，优先考虑其他更好的样式解决方案。
css深度选择器 /deep/
zhou_xiaozhou的博客
01-10 8237
css深度选择器 /deep/
css 深度选择器（穿透选择器）
XH1234234的博客
10-20 1726
引入第三方组件库（如element-ui、element-plus），修改第三方组件库的样式样式文件中使用了 scoped 属性，但是为了每个组件之间不相互影响所以不能去除scoped 属性，此时需要用样式穿透选择器来修改第三方组件的样式，以下罗列了三种方法。适用与 css、stylus，不太推荐，可能会有问题。适用于 scss、less。
css,less,scss中的深度选择器，结合elementUi使用
LiuJia20010827的博客
07-07 1642
css中深度选择器用到的是 >>>加类名 可以很方便的找到自己想要修改的样式。lees中用到 /deep/ 加类名。scss中用到::v-deep 加类名。
css预处理文件使用scss嵌套写法深度选择器deep失效问题
m0_48521482的博客
03-29 2874
vue3 + vite + elementPlus项目，css预处理文件使用scss嵌套写法导致深度选择器deep失效
CSS深度(穿透)选择器
weixin_57677300的博客
08-09 5969
CSS深度(穿透)选择器
Vue项目使用/deep/报错：SassError: expected selector解决方案--亲测有效
wwyxjjz的博客
09-29 5476
项目npm run dev报错如下： 解决方法： 尝试用 ::v-deep 替换 /deep/ ，成功解决了问题。 效果如下图所示(完美解决~) 某些预处理器(例如Sass)可能无法>>>正确解析。 在这些情况下，可以用/deep/ 如果/deep/报错，可以使用::v-deep 组合器-两者都是它们的别名，>>> 并且工作原理完全相同。 用法和/deep......
CSS深度穿透选择器（＞＞＞,/deep/,::v-deep）
qq_34082921的博客
01-31 1334
1.操作符 >>> 可能会因为无法编译而报错2.dart-sass不支持/deep/与>>>写法3. vue3.0 中使用 /deep/ 会报错4.对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 更通用。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值