平常在项目中肯定遇到过像是样式无法修改的问题,通过百度查询后都会发现是scopred的原因。
今天小编在项目上,想要修改引用了第三方组件库(element ui)的样式,又不想去除scoped属性造成组件之间的样式覆盖,无法实现、不生效等问题, 原来是scss使用/deep/不生效 以下是我列出来的不同的样式的使用方法
- 首先是基本语法
外层容器 >>> 组件 { }
1.stylus的样式穿透使用 >>>
.home >>> .el-input__inner {
width: 160px ;
}
2.sass和less以及scss的样式穿透
这两个的样式穿透的方式常用的是这两种 /deep/和 ::v-deep
sass使用/deep/
外层容器 /deep/ 组件 { }
less和scss使用::v-deep
外层容器 ::v-deep 组件 { }
::v-deep 与 /deep/ 都是深度选择器(样式穿透),都能实现对组件内部的样式修改
.home /deep/ .el-input__inner {
width: 160px !important;
}
::v-deep .el-input__inner {
width: 160px;
}
小编就是scss使用/deep/不生效 换成::v-deep就可以了