FontAwesome imported before other SCSS imports

sage
,
1

Hi,
my main.scss is

/** Mixins **/
@import "utils/mixins";

/** Variables **/
@import "common/variables"; // <=== this file starts with some @font-face imports

/** Import everything from autoload */
@import "./autoload/**/*";

// FontAwesome
@import "~@fortawesome/fontawesome-free/css/all.css";

...

but for some unknown reasons the compiled main.css starts with the CSS from FontAwesome and only after there’s the @font-face’s (from variables.scss).
So it seems FontAwesome is compiled before all, but I need to have the @font-face’s as the first thing in main.css.

Some helps? Thanks

2

No one can help me?
Thanks

3

If you follow the instructions from their docs, you should have no problem.
One thing to bear in mind though is that you don’t need to copy files; just import/reference the correct paths and webpack will take care of it.

4

Hi @codepuncher
as you can see from my code above, I only import this:

@import "~@fortawesome/fontawesome-free/css/all.css";

All works correctly but sage/webpack compiles FontAwesom css before the other imports. Any ideas why?

5

If you declare the .css extension in a SASS import, it will compile to a traditional CSS import and hoist @import "~@fortawesome/fontawesome-free/css/all.css"; to the top of your file.

Remove the extension and SASS will inline the contents of the CSS file at the position where you declare the import.

So, in conclusion, try remove the .css file extension.

1 Like
6

FWIW, this is how we recommend using Font Awesome with Sage: