Multiple SCSS packages (Bootstrap & Fontawesome) compile with an "undefined variable" error

help
1

Hi there,

I’ve set up a standard ToDo App with Blaze and added latest Bootstrap 4. Everything worked fine.
But when I tried to add one more scss-package, in my case Fontawesome 5, Meteor started to give me an error:

error: Scss compiler error: Error: Undefined variable: "$fa-css-prefix".
  on line 4 of core
  from line 7 of ../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss
  from line 6 of {}/client/main.scss
  >> .#{$fa-css-prefix},

If I import either of those packages alone - no errors reported. But together

@import "../node_modules/bootstrap/scss/bootstrap.scss";
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";

it’s always an “Undefined variable” error.

I can’t get my head around it.
Any ideas?

2

Finally I found out that the problem was in the indentical parcials names. Both packages have _variables.scss and _mixins.scss. I just renamed them. Well, probably it’s not the most beautiful solution but it works. If you have some better ideas, e.g. may be you are aware of how to make fourseven:scss module distinguish modules with the same names but in different folders, please let me know.

3

I had the very same problem, see my comment here:

IIRC, it can be workarounded by using

@import './variables';

instead of

@import 'variables';

but this still requires to patch the imports, which is not nice.

It would really be nice if SCSS would become a first-class citizen in Meteor.

1 Like