How to ensure that the order of css definition for Vue.js development and release is the same?

how do I ensure that the order of css definitions for Vue.js development and release is the same?
when I was developing a Vue.js project, during development and after release, I found that the css style was inconsistent:


excuse me, what"s going on with this situation?

doesn"t it seem that css defines css in the same order when webpack is packaged?

for example:

// dmeo.html
<span class="Color">Colored Text</span>

// demo.css
.Color {
   color: blue;
}

.Color {
   color: red;
}

you need to add weight to css here, but what if you don"t? How to make sure that when webpack is packaged, the order of css definition remains the same?

Mar.11,2021

first go to the inspector to check the styles applied to this element to see if the color has been overwritten. The second order of
will not change. Your demo.css must not really be written that way-- maybe your quotation is in the wrong order. Check it again.


your way of thinking is wrong. You must have written different styles using the same className, on multiple pages, causing the styles to be overwritten.
solution:

  1. add scoped; to the style of the current .vue file
  2. A top-level style at the top of the page, such as

.top{
    a{},
    b{}
}
Menu