sass 样式问题?

Question

左边是.vue文件，右边是css文件，通过import引入，给这个弹窗header隐藏了

然后这个.vue文件有个动态组件，动态组件里也有弹窗，但是动态组件里的弹窗需要.el-dialog————header的，

style标签上都加了scoped 但是现在这个.vue文件隐藏了 导致动态组件里子组件里的弹窗header也没有了

我都加了scoped了 为啥还影响呢

Answer 1

开在头添加的 /deep/ 其实本质就是把 scope 去掉。
所以你的 scss 编译完成之后就会变成：

.el-dialog{ ...
.el-dialog .el-dialog__header{....

并不是你所期望的

.el-dialog[data-v-123456]{ ...
.el-dialog[data-v-123456] .el-dialog__header{....

所以最好在使用 /deep/ 的时候，再最外层包裹一下，比如说：

.this-page {
   /deep/.el-dialog{
     ...

最终就会编译成这样的：

.this-page[data-v-123456] .el-dialog{ ...
.this-page[data-v-123456] .el-dialog .el-dialog__header{....

Answer 2

还是单独拿出来再加个/deep/