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         


        

Answer 1

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";

Answer 2

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).