css样式穿透

平常在项目中肯定遇到过像是样式无法修改的问题，通过百度查询后都会发现是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就可以了

一定注意：在写之前必须确认嵌套层级是正确的！！！