一、问题描述：项目中用到了 elementui，如果使用预处理器 scss, sass,less , 修改样式可能修改不掉, 而且这种需求出现的频率非常高。但如果去掉scoped话又会影响全局样式。
二、问题解决：样式穿透的方式操作
- 疑问：那么究竟什么时候使用 >>> 、 /deep/ 和 ::v-deep
- 1.1、>>> 如果项目使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改
<style scoped>
/*编译前*/
.a >>> .b {
/* ... */
}
/*编译后*/
.a[data-v-f3f3eg9] .b { /* ... */ }
</style>
- 1.2 、@deep: ~">>>";
<style scoped>
@deep: ~">>>";
/*编译前*/
@{deep}.a {
/* ... */
}
@{deep}.b {
/* ... */
}
/*编译后*/
.[data-v-4c0f2e01] a{ /* ... */ }
.[data-v-4c0f2e01] b{ /* ... */ }
</style>
- 2、/deep/ 项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错 。可以使用 /deep/
注意：vue-cli3以上版本不可以
<style scoped>
/*用法1*/
.a {
/deep/ .b {
/* ... */
}
}
/*用法2*/
.a /deep/ .b {
/* ... */
}
</style>
- 3、::v-deep 如果使用了预处理器都可以使用 ::v-deep
<style scoped>
/*用法1*/
.a{
::v-deep .b {
/* ... */
}
}
/*用法2*/
.a ::v-deep .b {
/* ... */
}
</style>
注意：dart-sass 不支持/deep/和>>>的写法，只能用::v-deep，node-sass没问题。所以，如果您的/deep/不起作用，可以，可以换::v-deep试试。/deep/在某些时候会报错，::v-deep更保险并且编译速度更快。
