Los estilos en línea son inconsistentes después del empaquetado de vue+webpack+element

No hay ningún problema al ejecutar el estilo localmente. Después de empaquetarlo y acceder al entorno de prueba, se produce un problema. Puede ver que el orden del CSS cargado ha cambiado. Cuando una determinada clase se modifica de manera uniforme, A sobrescribe localmente a B y, después del empaquetado, B puede sobrescribir A. Encontré muchos artículos que dicen que esto se debe al orden diferente de carga de CSS, que de hecho es el caso. A menudo, en un determinado componente, no se utiliza el alcance, lo que resulta en la contaminación del estilo global.

Mi proyecto fue desarrollado anteriormente por varias personas y no era riguroso, lo que provocó errores causados ​​por las citas de CSS en todas partes. La razón específica es que el estilo del elemento se introdujo en main.js y luego se introdujo nuevamente en un componente separado.

Elimine los estilos orientados globalmente introducidos en todos los componentes (porque se introducen a través de @import o import, y el alcance es global) y luego introdúzcalos de manera uniforme en main.js. De esta manera, el orden global se determina en main.js y no se hace referencia a él repetidamente.

Los estilos local y de prueba son los mismos. Ya no se ve afectado por el embalaje. En este momento, se deben realizar modificaciones específicas en algunos estilos contaminados en el ámbito. Si el tipo de ventana emergente del elemento necesita separarse del ámbito, escriba un estilo público e introdúzcalo en main.js.

Establezca una regla: main.js en el estilo público se importa y los estilos individuales se escriben en el ámbito. Si se dividen en estilos públicos, se pueden introducir de las siguientes maneras.

Me sorprende mucho que no haya ningún problema localmente pero sí después del embalaje. El orden de embalaje y carga es lógicamente de arriba a abajo. ¿Podría ser que al cargar páginas vue específicas, el orden sea diferente? Por verificar.