css样式穿透

平常在项目中肯定遇到过像是样式无法修改的问题，通过百度查询后都会发现是scopred的原因。
今天小编在项目上，想要修改引用了第三方组件库(element ui)的样式，又不想去除scoped属性造成组件之间的样式覆盖，无法实现、不生效等问题， 原来是scss使用/deep/不生效 以下是我列出来的不同的样式的使用方法

首先是基本语法：

外层容器 >>> 组件 { }

1.css样式穿透使用

.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就可以了