背景是我需要将element-ui的upload组件样式进行修改，但是它的样式是隐藏在内部的，普通的最外层是改不到的。必须要用深度选择器深入到它里面才行。

 

网上找了很多方法，什么/deep/，>>>，::v-deep，全都试了，甚至位置都改了又改也试了，因为怕自己加错地方了。当然最终是鸡毛都没生效，很痛苦。

没生效的原因和解决方案

搞了很久后，找到资料说，是由于vue的组件版本太低导致的，就是这俩货：

"vue-loader": "^11.3.4",
"vue-style-loader": "^2.0.5",

按照网上的，先是一口气改到了下面的版本，但是页面却白屏了，看来是版本飞太猛有问题了，一时半会也没能解决

"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",

最后换了一套版本，终于有用了：

"vue-loader": "^12.0.0",
"vue-style-loader": "^3.0.0",

据说这两个组件的版本是搭配的，不能瞎几把改，反正我最终这套版本是有用的，也暂时没出什么问题。

大家只需要知道，deep没生效的原因是版本太低导致的就对了，如果你的这俩货的版本和我以前差不多，那就铁定是这个问题了。如果我后面给出的版本无法使用，就自己研究一下换成其他版本吧。

 

怎么使用/deep/

顺带贴一下我是怎么用/deep/的

    .upload-demo {
        /deep/ .el-upload-list__item {
            transition:none
        }
    }

upload-demo就是我们可以正常更改的最外层，它里面藏着.el-upload-list__item，通过深度选择器选中了它，并修改了它的样式。

 

 

 

参考资料：

vue-loader深度作用选择器无效解决办法（修改iview组件样式）

https://blog.csdn.net/w779050550/article/details/98877872