meteor-scss: Not resolving imports correctly

I’m getting errors that look like:

=> Errors prevented startup:                  
   
   While building for web.browser:
   /imports/startup/client/main.scss: Scss compiler error: Undefined variable: "$mdc-typography-styles".

Check out https://github.com/Zodiase/Meteor-Tests/tree/mdc-demo--sass-issue for reproduction.

https://github.com/Zodiase/Meteor-Tests/blob/mdc-demo--sass-issue/meteor-app/imports/startup/client/main.scss shows how the dependencies should be resolved and how there shouldn’t be any issue following that strategy.

It uses a Meteor package zodiase:mdc-sass which is the one I’m working on. All the SASS files are adopted from the official Material Components repo and shouldn’t have dependency bugs. The errors I’m having now make the package completely unusable.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 15

Most upvoted comments

This problem still exists

holmrenser on Nov 2, 2017

@minau87 Meanwhile if you, like me need continue your work - you could manually create your own local bootstrap.scss and font-awesome.scss

I know it sounds silly, and it is - but it’s working on my end until this is fixed.

Example …/client/stylesheets/bootstrap.scss

And in that file you create a copy of bootstrap’s imports like this.

@import "{}/node_modules/bootstrap/scss/variables";
... all the other bootstrap imports ...
@import "{}/node_modules/bootstrap/scss/utilities";

and …/client/stylesheets/font-awesome.scss

@import "{}/node_modules/font-awesome/scss/_variables";
... all the other font-awesome imports ...
@import "{}/node_modules/font-awesome/scss/_screen-reader";

Import your local bootstrap.scss and font-awesome.scss in your main.scss file.

peshi on Feb 25, 2017

=> Errors prevented startup:

While processing files with fourseven:scss (for target web.browser): /client/scss/core/core.scss: Scss compiler error: Undefined variable: “$gray-200”.

/client/scss/style.scss: Scss compiler error: Undefined variable: “$aside-menu-width”.

xumoulei on Jan 18, 2018

Same problem here, I am getting Errors prevented startup:

While processing files with fourseven:scss (for target web.browser): /client/index.scss: Scss compiler error: File to import: {}/node_modules/font-awesome/scss/font-awesome.scss not found in file: /home/xxxxx/xxxxxx/{}/client/index.scss

Doesn’t happen with bootstrap don’t know why

lmaddio on Apr 1, 2017

I guess I ran into the same problem with #282. Adding the references manually is a weird workaround, especially you use complex SCSS frameworks. Re-adjusting these references on every update is just too error-prone. Would love to see a fix for this.

derwaldgeist on Sep 26, 2018