Vue中无法编译/deep/的两种解决方案

最新推荐文章于 2024-08-27 17:23:36 发布

qq_39717623

最新推荐文章于 2024-08-27 17:23:36 发布

阅读量2.6k

点赞数 1

分类专栏： WEB前端 VUE 文章标签： vue.js sass 前端

本文链接：https://blog.csdn.net/qq_39717623/article/details/121692282

版权

WEB前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

VUE

1 篇文章 0 订阅

订阅专栏

方法一

1.卸载当前项目中的sass-loader
	npm uninstall sass-loader
2.安装低版本sass-loader,最高版本只能为7.0.0，7.0.1就编译不了/deep/了
	npm install sass-loader@7.0.0
3.安装node-sass,如果安装了node-sass可以先卸载,没安装直接安装
	npm uninstall node-sass --卸载
	npm install node-sass --安装
安装node-sass是因为安装低版本sass-loader需要引入node-sass依赖来支持，不然会报错

方法二

把代码中的/deep/ 全部替换成::v-deep

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_39717623

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue项目使用deep语法报错并且无法启动项目最佳最完美解决方案

m0_67401055的博客

03-09

1万+

vue项目使用/deep/语法报错最近使用vue创建后台管理系统，在改变饿了么组件样式时，使用/deep/样式穿透压根不生效，而且终端还会报错，之前可是可以随便用/deep/的，一下子就给整懵逼了~，先来看看报错信息长啥样：然后当你去各种百度会发现遇到同样问题的人还挺多，而且绝大多数出现的时间都是在2020年期间开始很多人出现这类问题：然后最多的答案无非就是使用::v-/deep/ 来替换/deep/，确实有效，但是会不能使用scss嵌套写法的问题，不然样式嵌套的子元素样式不会生效如图：所以只能

基于 Vue3打造前台+中台通用提效解决方案（下）

oschina_41559824的博客

03-04

1466

attribute 的时候，它的 CSS 只会影响当前组件的元素，和 Shadow DOM 中的样式封装类似。根据我们本章的内容可以发现，整个的第三方登录逻辑还是比较复杂的，特别是微信的第三方登录步骤更加繁琐。所谓倒计时，其实更多的是一个时间的处理，那么对于时间的处理，此时我们就需要使用到一个第三方的包: dayis。注意：扫码成功重定向的地址是在小窗口打开的、并不是在原来的窗口打开、登录成功的回调也是在小窗口中回调。在对接微博分享之前，我们还是按照老规矩，先来说一下所谓的分享，指的是什么。

2 条评论您还未登录，请先登录后发表或查看评论

深度选择器探秘：/deep/、＞＞＞、::v-deep 与 v-deep() 的区别

最新发布

everyStudy的博客

08-27

510

deep/

VUE Element Admin框架深度选择器/deep/编译报错，导致el-card修改样式失败的解决方案

bufegar0的博客

07-05

4136

需求背景 el-card组件的el-card__header行高设置比较高，需要在项目中修改掉，但无论如何修改都不生效。问题描述头部样式在scoped下作用无效，可以通过添加/deep/的方式解决，但由于版本或者其他原因，目前未知，添加该方法总是报错。如下代码总是编译不通过。 .box-card /deep/ .el-card__header { padding: 12px 14px; font-size: 14px; } 报错信息如下： Module build failed

vue项目使用deep语法报错并且无法启动项目（解决方案）

zhj1329000的博客

06-07

4276

vue使用elementui，使用/deep/穿透样式时会报错问题

vue3中 /deep/ 的使用，vue3不支持/deep/样式

前端打工人的博客

02-06

1830

vue2中是使用/deep/样式穿透，在vue3中不支持了，vu3中使用:deep()取代了。

vue =＞ Node Sass to Dart Sass不兼容deep

Write less，do more

02-05

1508

不兼容替换 node-sass 之后有一个地方需要注意，就是它不再支持之前 sass 的那种 /deep/ 写法，需要统一改为 ::v-deep 的写法。相关： issue 具体 demo： .a { /deep/ { .b { color: red; } } } /* 修改为 */ .a { ::v-deep { .b { color: red; } } } 不管你是否使用dart-sass，我都是建议你使用::v-deep

探究SEO与VUE首屏渲染及其解决方案

weixin_56659504的博客

04-09

417

五个方面 1.SPA单页面应用首屏打开速度很慢，因为用户首次加载需要先下载SPA框架及应用程序的代码，然后再渲染页面。不利于SEO 根据这几个缺点，我们便又引出了接下来讨论的两个主题，SEO和SSR，先谈谈SEO。 2. SEO搜索引擎搜索引擎优化。SEO是一种通过了解搜索引擎的运作规则（如何抓取网站页面，如何索引以及如何根据特定的关键字展现搜索结果排序等）来调整网站，以提高该网站在搜索引擎中某些关键词的搜索结果排名。 Vue SSR说：如果你的应用程序初始展示 loading 菊

Vue中的diff算法深度解析

yyds2026的博客

10-21

783

我们经过前面的章节学习已经知道，要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？为了解决这个问题，我们的解决方案是–根据真实DOM生成一颗，当某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。这也就是我们所说的一个虚拟dom diff的过程。

vue使用ts 引入组件_vue中引入typescript开发使用vue.extend()和vue.class-component

weixin_39941847的博客

12-20

1401

最近尝试了一下 TypeScript，试着把一个 Vue 项目改成了 TypeScript 的，感觉还不错目前 Vue 和 TypeScript 的配合还不算很完美，Vuex 和 TypeScript 的配合挺糟糕的，尝试需要谨慎如果想体验一下的话，强烈建议你用 vue-cli 3 直接生成项目目录，这样会少挺多配置，比如配 tsconfig 什么的，在用 vue-cli 的时候选择 TypeSc...

【问题记录】sass-loader无法识别/deep/语法导致打包出错

草率小猿的博客

08-29

1885

sass-loader无法识别/deep/语法导致打包出错

Vue中 scss不支持/deep/写法问题

weixin_43714543的博客

07-20

1690

在style有scoped属性时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如 .conBox /deep/ .el-input__inner{ padding:0 10px; } 如果/deep/报错，可采用::v-deep .conBox ::v-deep .el-input__inner{ padding:0 10px; } ...

解决vue+scss中使用 /deep/ 不生效

热门推荐

西木的博客

10-06

2万+

遇到的问题如下： elementUI里使用复合input输入框时，默认append的样式不能满足后面经纬度符号的显示，并且背景颜色也有问题，对此进行样式修改，如下但修改后的效果如第一张图所示没有任何效果，在Chrome里也并未出现上述样式，明显是没有选中于是想到深度选择器，依稀记得原来好像使用过/deep/深度选择器，不过vue编译报错使用 >>> 选择器也不行，编译能通过，但不生效于是在vue的官方文档找到了解决办法，关于为什么/deep/选择器没有生效在此没有深入研究

vue+element,scss加/deep/样式不生效问题

axiaozhizhi的博客

02-02

2717

vue+element,scss加/deep/样式不生效问题比如：要调整.el-collapse-item__header的样式 /deep/.el-collapse-item__header{ background-color: red; } 不生效。把/deep/更换成 ::v-deep ::v-deep .el-collapse-item__header{ background-color: red; } 可以随意设置自己想要的样式了^ _^ ...

:deep() 在Vue3种不生效的问题

qq_45905655的博客

07-26

363

解决:deep() 在vue3种不生效的问题

vue中使用深度选择器修改第三方UI库默认样式时，/deep/报错不生效

qq_44984407的博客

06-04

3452

在vue项目中，引用了第三方UI库(如vant-ui)，此时想在某个组件里面更改vant-Ui的样式，而不影响全局，发现直接用它里面组件的类名去修改无效果。这时候想到了用深度选择器解决这个问题，但是发现使用了 /deep/报错这很可能是使用了scss编译的问题然后改成 >>> 也是不报错了但是也不生效的，最后发现可以改成 ::deep 深度选择器总结：官方深度选择器解释：深度选择器一般用于组件开发，修改组件内的某些样式深度选择器表示种类： “/deep/” “>

vue cli3中使用scss，/deep/失效

Mr_2612757的博客

09-12

232

用::v-deep可以。

vue scss中使用/deep/报错

08-26

在 Vue 中使用 `/deep/` 或 `::v-deep` 可以解除样式作用域限制，允许您在子组件中修改父组件的样式。但是需要注意的是，`/deep/` 在 Vue 2.x 中已被废弃，取而代之的是 `>>>` 或 `::v-deep`。如果您在使用 `/deep/` 或 `::v-deep` 时报错，可能是因为您的 CSS 预处理器（如 SCSS）不支持这些选择器。这是因为 `/deep/` 或 `::v-deep` 是 Vue 特定的选择器，不是标准的 CSS 选择器。解决方法是使用其他方法来实现样式穿透，或者尝试更新您的 CSS 预处理器版本以获得对 `/deep/` 或 `::v-deep` 的支持。例如，您可以使用以下方法来实现样式穿透： 1. 使用 `>>>` 或 `::v-deep` 代替 `/deep/`。在 Vue 2.x 中，可以将 `/deep/` 替换为 `>>>` 或 `::v-deep` 来实现相同的效果。例如，如果您想穿透到子组件中修改标题的样式，可以这样写： ```scss <style lang="scss" scoped> .parent { /deep/ .child { /* 修改子组件的样式 */ } } </style> ``` 可以替换为： ```scss <style lang="scss" scoped> .parent { >>> .child { /* 修改子组件的样式 */ } } </style> ``` 2. 使用 `::v-deep` 代替 `/deep/`。在 Vue 2.x 中，您还可以使用 `::v-deep` 来实现样式穿透。例如，如果您想穿透到子组件中修改标题的样式，可以这样写： ```scss <style lang="scss" scoped> .parent { /deep/ .child { /* 修改子组件的样式 */ } } </style> ``` 可以替换为： ```scss <style lang="scss" scoped> .parent ::v-deep .child { /* 修改子组件的样式 */ } </style> ``` 请注意，以上方法需要您的 CSS 预处理器支持 `>>>` 或 `::v-deep` 选择器。如果您仍然遇到问题，请检查您的 CSS 预处理器文档或更新预处理器版本以获得支持。