node - sass scss

Mantenga @import al final de CSS después de compilar SCSS

Question

Necesitamos poner @import al final de mi archivo CSS. Por ejemplo:

SCSS:

@import "reset.css";
Body {
   font: 0.8em arial;
}
@import "customation.css"

compila a:

@import "reset.css";body{font: 0.8em arial;}@import "customation.css"

pero después de la compilación cambió el orden @import y el archivo CSS será este:

@import "reset.css";@import "customation.css";body{font: 0.8em arial;}

Es muy importante para nosotros mantener @importing el archivo custom.css al final para nuestra personalización. No podemos poner @import en el archivo CSS manualmente porque el archivo SCSS se cambiará y el archivo CSS se reescribirá. ¿Cualquier sugerencia?

Answer 1

¿Estás usando @import por algún motivo en particular? Hay impactos en el rendimiento y ya no hay un caso de uso importante.

Sería mejor si usara el @import de Sass para concatenar el archivo, esto también le permitiría importar en el orden que desee y depender de la cascada.

@import "reset";

Body {
  font: 0.8em arial;
}

@import "customation";

Answer 2

No puedes. Sass es lo suficientemente inteligente como para saber que @import declarations debe estar al principio del archivo, por lo que lo reescribe para que sea válido.

El @import CSS at-rule permite importar reglas de estilo desde otras hojas de estilo. Estas reglas deben preceder a todos los demás tipos de reglas, excepto las reglas @charset; como no es una declaración anidada, no se puede usar dentro del grupo condicional at-rules.

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Si esto no es aceptable, deberá usar múltiples declaraciones de enlace (que sin dudas son mejores para el usuario).