Different pages of VUE have written (copied pages) the same class, how to deal with it so that the page styles are not affected by each other.

1. Basics: The same style is packaged into the global style file (index.css), and each page is referenced together. (If the subpage needs to change a certain style of the global style, attach the style to the subpage, or update the style weight.)

2. VUE provides the scoped method. If the subpage does not use the global style, or does not modify the component library style, add scoped in <style> to emphasize that the current style is only used for this page. (The use of global styles can be reduced and each subpage is styled separately. It is very pure but the time cost becomes higher.)

3. Try to keep the uniqueness of each page class. This is a good habit. When using scss or less, try to use the named nested format to write the style.

Summary: All pages use a global style, such as width: 50px; it can be written as a dynamic style w-50 in the global style. Sub-pages no longer write individual styles, except for a small amount of supplements and component style modifications (minimize component global style modification or create a new style file); all pages do not use global styles, all scoped, and a single page writes a unique style (recommended); all pages The global style and the subpage style are used together, but the class name supplemented by the subpage must be unique, otherwise the subpages will affect each other.

New way: When using scoped, global styles can be used at the same time.

Guess you like

Origin blog.csdn.net/m0_46551050/article/details/127978533