解决vue scoped scss 无效的问题
今天遇到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局部修改样式更改不了
我是B组件
修改vue插件或者框架内组件使用
语法:.自己定义的类名/deep/.组件内的类名{/*代码块*/}
看下图:
修改组件样式三种方式
以下例子以vux来弄。/deep/和>>>在vue中会自动生成选择器的选择属性,你在页面中,会看到控制台中的会有[data-v-xxxxxx]的。
注意:在谷歌中,也有这个/deep/中间选择器,但是谷歌放弃这个,如果在你控制台出现下面的图片的警告,证明你写错了,多写了/deep/https://www.chromestatus.com/features/4964279606312960
vue/deep/警告
解决方案:只要在页面中去查找下即可,利用vue渲染后会把所有的,会在控制台能看到
第一种:使用/deep/
推荐的。看下面例子。注意:使用cass和less只能使用/deep/这个方法
方法二:使用>>>
使用这三个大于号就可以找到,跟上面的/deep/差不多。