The background is that I need to modify the style of the Upload component of the Element-UI, but its style is hidden inside and the ordinary outermost layer cannot be changed. You have to go deep into it with the depth selector.

 

I found many methods on the Internet, such as /deep/, >>>, :: V-deep, I tried all of them, even changed the position again and again, because I was afraid of adding the wrong place. In the end, of course, nothing worked. It was painful.

Reasons and solutions for failure

After doing it for a long time, I found information that it was caused by the low component version of VUE, which is these two goods:

"vue-loader": "^ 11.3.4"."vue-style-loader": "^ at 2.0.5." ".Copy the code

According to the online, the first breath changed to the following version, but the page is white screen, it seems that the version of flying too fierce problems, a half will not be able to solve

"vue-loader": "^ 13.3.0"."vue-style-loader": "^ 3.0.1." ".Copy the code

Finally, I changed a set of versions, and finally it worked:

"vue-loader": "^ 12.0.0"."vue-style-loader": "^ 3.0.0".Copy the code

It is said that the versions of these two components are matched, so it can’t be changed a few times. Anyway, my final version is useful and there is no problem for now.

All you need to know is that deep is not working because the version is too low. If your versions are similar to mine, it is definitely the problem. If the version I present below doesn’t work, do your own research and switch to another version.

 

How to use /deep/

By the way, how do I use /deep/

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

Upload-demo is the outermost layer that we can normally change, and it contains. El-upload-list__item, which was selected by the depth selector and styled.

 

 

 

References:

Vue-loader depth selector invalid solution (modify iView component style)

Blog.csdn.net/w779050550/…