When developing with vue, all styles developed locally can take effect, but some styles will become invalid after packaging, and the attribute value does not change when F12 is pressed in the browser.
The problem on my side is that the F12 walkthrough found that the affected css style comes from static\css\chunk-4be4624ac.css is generated through packaging. Therefore, it is judged that the packaging generation style integration is partially affected.
You can try the following options
1. First, you need to check whether the scoped attribute is added to each page
The css style can only be used for the current Vue component, so that the styles of the components will not pollute each other. If all style tags of a project are added with the scoped attribute, it is equivalent to realizing the modularization of styles
2. /deep/ or !important
/deep/, change the style for this class name, so that if there are multiple same components on the page, the page style will not be confused. The style after the change is like this
!important, the role is to increase the application priority (priority) of the specified style rule
3. Main.js style introduction sequence problem
Sometimes we find that the style in the component does not take effect, which may be covered by the third-party component style. Introduce the router in main.js and put it at the end, so that the component style can be rendered after the third-party style.
4. I have tried all the above methods when this problem occurs, but it still doesn’t work! So I bind directly through the id to modify the priority
