背景是我需要将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组件样式)