Keep @import at the end of CSS after SCSS compile

Question

We need to put @import at the end of my CSS file. For example:

SCSS:

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

compile to:

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

but after compile it changed the @import order and CSS file will be this:

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

It's very important for us to keep @importing the custom.css file at the end for our customization. We can't put the @import to CSS file manually because SCSS file will be changed and CSS file will be rewritten. Any suggestion?

Answer 1

You can't. Sass is smart enough to know that @import declarations must be at the beginning of the file so it rewrites it for you to be valid.

The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules.

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

If this is not acceptable, you'll need to use multiple link declarations (which are arguably better anyway for the user).

Answer 2

Are you using @import for any particular reason? There are performance impacts, and no major use case anymore.

It would be better if you used Sass's @import to concatenate the file instead, this would also allow you to import in the order you want and rely on the cascade.

@import "reset";

Body {
  font: 0.8em arial;
}

@import "customation";