解决vue scoped scss 无效的问题

2023-07-17 05:19:03 80

今天遇到scoped内部的scss设置无效，解决办法如下：

/deep/


.position-el-steps{
/deep/.el-step.is-vertical{
.el-step__description{
margin-top:-20px;
}

.el-step__line{
border-left:2pxdashed#c0c4cc;
background-color:transparent;
visibility:visible!important;
}
}
}

补充知识：【vuescoped样式修改】框架或插件组件样式更改及/deep/警告

前言

在做vue项目的时候，很多人应该已经碰到在vue组件中，style局部修改样式更改不了





/*使用scoped更改的组件样式。*/
/*
此处只是举个栗子使用，没有经过验证。很多人会下面这摸写，但是发现改变不了B组件的样式，其实是scoped局部的，所以不能。
.boxA.my{
color:red;
}
*/
.boxA/deep/.my{
color:red;
}

修改vue插件或者框架内组件使用

语法：.自己定义的类名/deep/.组件内的类名{/*代码块*/}

看下图：

修改组件样式三种方式

以下例子以vux来弄。/deep/和>>>在vue中会自动生成选择器的选择属性，你在页面中，会看到控制台中的会有[data-v-xxxxxx]的。

注意：在谷歌中，也有这个/deep/中间选择器，但是谷歌放弃这个，如果在你控制台出现下面的图片的警告，证明你写错了，多写了/deep/https://www.chromestatus.com/features/4964279606312960

vue/deep/警告

解决方案：只要在页面中去查找下即可，利用vue渲染后会把所有的，会在控制台能看到

第一种：使用/deep/

推荐的。看下面例子。注意：使用cass和less只能使用/deep/这个方法






/*
修改样式
通过使用box-out的class类，找到下面组件内的class类，中间必须得使用/deep/才能找到下面的class类。
*/
.box-out/deep/.xxxxx组件样式类{
color:red;
}

方法二：使用>>>

使用这三个大于号就可以找到，跟上面的/deep/差不多。






/*
修改样式
通过使用box-out的class类，找到下面组件内的class类，中间必须得使用>>>才能找到下面的class类。
*/
.box-out>>>.xxxxx组件样式类{
color:red;
}

方法三：使用全局样式表（不推荐）

前面两种方式是都是局部的（推荐），也是可以通过全局样式表改，当然记得在外面添加命名空间（不懂css的命名空间的话，自行百度）。这个推不推荐的得看个人。希望能够根据业务需求进行增加修改。

另外说点其他技巧

如果在浏览器中，看到当前的vue组件属性[data-v-xxxxxx]的话，那么可以直接拿过来使用，碧如下面：

以上这篇解决vuescopedscss无效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

解决vue scoped scss 无效的问题

热门推荐

随机推荐