vue中解决scss下::v-deep影响到子组件的问题

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量1k 收藏
点赞数
文章标签： vue.js scss 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kirinlau/article/details/129360676
版权

开发中经常会用到深度选择器来修改第三方组件库等子组件的样式，这时候就用到样式穿透(style Penetration)

常用的有>>>、 /deep/、::v-deep

使用中发现了一个问题，就是当在父组件使用了v-deep修改样式时，会影响到子组件，修改为/deep/报SassError: expected selector. 改为 >>>可以解决这个问题

kirinlau
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
scss解析/deep/以及＞＞＞深度选择器报错
only_neo的博客
07-30 3977
若存在::v-deep未生效的情况，确认使用的文件是否为组件级，若为组件级，改为在调用该组件的页面设置::v-deep即可。但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告。但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.如果vue的style使用的是css，那么则。此时我们可以使用第三种方式。
vue样式穿透 ::v-deep的具体使用
10-15
主要介绍了vue样式穿透 ::v-deep的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解vue中v-bind:style效果的自定义指令
10-15
主要介绍了vue中v-bind:style效果的自定义指令，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
填坑记录之Vue中v-model与:model区别
01-20
初做vue项目中遇到这个问题，记录一下。 源代码： 打算做的表单验证功能。结果发现在验证的过程中username规则的第一条正确了却一直通过不了。 通过控制台得知长度一直为1。原来是拿不到数据。 v-model通常用于input的双向数据绑定,它并不会向子组件传递数据。 :model是v-bind:model的缩写，是绑定自定义属性.它只是将父组件的数据传递给子组件，并没有实现父组件和子组件数据之间的双向绑定。 所以在form表单标签中，并没有向子组件传递数据，所以在input标签中获取不到数据。 正确的做法应该将form标签中v-model改为 :model，这样在子组件中才可以获
解决vue scoped scss 无效的问题
11-19
今天遇到scoped内部的scss设置无效，解决办法如下： /deep/ <style scoped lang="scss"> .position-el-steps { /deep/ .el-step.is-vertical { .el-step__description { margin-top: -20px; } .el-step__line { border-left: 2px dashed #c0c4cc; background-color: transparent; visibility: visible !important; } } } 补充知识：【
【Scss】＞＞＞ 或 /deep/ 或 ::v-deep 的作用
qq_45677671的博客
07-28 4052
>>> 或 /deep/ 或 ::v-deep 的使用方法，以及相关报错处理
SCSS中使用/deep/报错 ::v-deep 替换 /deep/
m0_57454052的博客
03-31 3974
预处理器（例如Sass）可能无法>>>正确解析。 在这些情况下，可以用/deep/ 如果/deep/报错，可以使用::v-deep 组合器-两者都是它们的别名，>>> 并且工作原理完全相同。 用法和/deep/ 完全一样 用 ::v-deep 替换 /deep/ ，就成功解决了问题。 ...
scss中使用/deep/深度选择器报错的解决办法
weixin_44900104的博客
08-04 2万+
scss中使用/deep/深度选择器报错的解决办法
scss下解决父组件中使用::v-deep修改样式穿透到子组件的问题
kirinlau的专栏
10-30 1731
开发中经常会用到深度选择器来修改第三方组件库等子组件的样式，这时候就用到样式穿透(style Penetration)而使用/deep/修改时报SassError: expected selector. 原因是sass不支持这个选择器。使用中发现了一个问题，就是当在父组件使用了v-deep修改自身组件或者第三方组件样式时，会影响到子组件中的样式，样式穿透的方式有：>>>、 /deep/、::v-deep这三种。使用>>>修改无效，原因是scss等预处理器却无法解析>>>第三种，使用::v-deep，
浅谈CSS中/deep/ ＞＞＞ ::v-deep属性 进行样式穿透
m0_48895571的博客
04-01 4580
浅谈CSS中/deep/ >>> ::v-deep属性 进行样式穿透
vue-scss-variable-scan:让vscode在vue文件中提示scss自定义变量
04-29
vue-scss变量扫描 这是一个扩展，允许vscode在Vue和Scss文件中提示SCSS的自定义变量。 扩展设置 有以下四个设置： vue-scss-variable-scan.globalPath ：SCSS扫描变量的路径（默认值：src / ** / *。scss） vue-scss-variable-scan.globalExcludePath ：SCSS扫描变量的排除路径。（默认值：“”） vue-scss-variable-scan.addCustomCssProperty ：此扩展仅支持css的某些属性，如果要支持更多属性，则可以在此设置中添加一些属性。（默认：[]）（PS：默认支持：[“背景”，“边框”，“颜色”，“宽度”，“高度”，“字体大小”，“填充”，“边距”]） vue-scss-variable-scan.excludeCssProperty ：如果您不
vue-custom-element：Vue自定义元素-Vue.js的Web组件自定义元素
02-06
目录 演示版 您可以在查看Vue-custom-element演示 安装 NPM npm install vue-custom-element --save import vueCustomElement from 'vue-custom-element' Vue . use ( vueCustomElement ) ; 要使用vue-cli构建Web组件，必须使用以下命令： vue-cli-service build --target lib --name your-component-name src/main.js 注意：命令vue-cli-service build --ta
scss 使用 /deep/报错，最新用法::v-deep
qq_69892545的博客
12-30 295
scss 使用 /deep/报错，最新用法::v-deep。
vue scoped css 深度选择器 父组件的样式将渗透到子组件中
細水、長流√的专栏
09-11 1324
当 style 标记具有该scoped属性时，其CSS将仅应用于当前组件的元素。代码如下： <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> 复制代码 编译之...
vue 父组件修改子组件样式 /deep/的用法
Tan_PF的博客
11-21 451
/deep/ 是一个用于选择器的前缀，用于在 Vue.js 的样式中穿透组件的scoped样式。
css关于/deep/的解释和用法
热门推荐
weixin_40442888的博客
07-29 5万+
/deep/的意思大概为深入的，深远的。无意中看到css中有关于这种写法，开始没太注意 ，以为是组件css的写法，后来才发现不是。我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了，然后你要想修改子组件的样式，一般是提取一个公共文件，在公共文件里面修改样式，但是这样也存...
scss中使用/deep/深度选择器报错
qq_48093489的博客
04-16 1万+
scss中使用/deep/深度选择器报错前言一、代码二、报错三、解决办法四、总结 前言 在带有scoped属性的style中书写样式时，无法作用影响到子组件中的样式，此时我们会使用到deep深度选择器，来解决此问题，我们在使用less预处理器，能正常使用，但是在scss预处理器中会报错。 一、代码 <style lang="scss" scoped> /deep/ .el-dialog__header { background-color: #81ecec !important; } &l
sass文件中使用深度选择器 /deep/不起作用
qq_45327886的博客
09-09 1万+
深度选择器 /deep/不起作用
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 382
步骤很详细，直接上教程……
vue3 中 scss 使用 :deep 不支持嵌套，::v-deep 又即将弃用，怎么办？
04-01
在 Vue3 中，可以使用 `::v-deep` 或 `>>>` 来实现深度选择器，但是官方已经宣布 `::v-deep` 即将被弃用，而 `>>>` 在某些情况下会出现问题。 解决方法： 1.使用 `:global`，可以将样式应用于整个组件或应用程序。例如，要应用于整个组件： ``` <style scoped> :global(.my-class) { color: red; } </style> ``` 2.使用 CSS 变量，可以在组件中定义变量，并在样式中使用它们。例如： ``` <style scoped> :root { --my-color: red; } .my-class { color: var(--my-color); } </style> ``` 3.使用 `::v-deep` 的替代方案 `::slotted`，它能在父组件样式中选择子组件的内容。例如： ``` /* 子组件 */ <template> <div class="my-class"> <slot></slot> </div> </template> /* 父组件 */ <template> <div> <slot> <p class="my-class">This paragraph will be styled</p> </slot> </div> </template> <style scoped> ::slotted(.my-class) { color: red; } </style> ``` 以上是一些可行的解决方法，可以根据实际情况选择适合自己的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kirinlau

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值