Materialize: Uncaught Error: Scss compiler error: Undefined variable: "$medium-and-down".

[yanickrochon]

Just got this after updating Meteor to 1.4.2.1 and Materialize to 0.97.8.

[moslemir]

+1

[lpgeiger]

@Dogfalo I can reproduce. This is NOT an issue with the Meteor update.

Seems like this is an issue with a Materialize SCSS definition in 0.97.8. Downgrading to 0.97.7 fixes this error.

Anyone upgrading meteor versions is also prompted for package updates, such as materialize:materialize.

[Phixiys]

How to downgrade? Mine will auto install latest materialize:materialize 0.97.8

Even if specify meteor add materialize:[email protected]

[tomscholz]

@Phixiys
You have to run

meteor add materialize:materialize@=0.97.7

You can read more about it here
https://atmospherejs.com/i/installing

[Phixiys]

@Dogfalo Yeah, searched stackoverflow and found it. Thank's though.
:-)

[yanickrochon]

Meh, the easiest way is to manually edit your .meteor/versions file :stuck_out_tongue: Then meteor will install the proper Materialize package automatically without updating. This can even be done running hot.

[acburst]

Can't seem to reproduce locally. I fresh installed Node, NPM, and Meteor.

I did run into some issues when trying to install the Materialize package fresh. But after I installed the fourseven:scss package first, installing Materialize went smoothly.

[kurapikats]

I encountered the same error $medium-and-down... and downgraded materializecss to version 0.97.7.
But now I got another issue: Failed to decode downloaded font: ...Roboto...
As seen here -> #2217

[charlesdagenais]

submitted a pull request to correct this #3924

[lpgeiger]

@acburst I did the same as you, and I definitely reproduce the same error.

@charlesdagenais can you tell us a bit more about the fix?

[charlesdagenais]

@keyscores Looks like the error happen when sass try to compile sass/style.scss . The compiler can't resolve any variable, because they're not imported. style.scss is only used for documentation website style. Renaming it to _style.scss and correcting the import statement in ghpages-materialize prevent it from been compiled to css

[tomscholz]

@charlesdagenais @acburst
With the fix applied I get:

=> Errors prevented startup:                  

   While processing files with fourseven:scss (for target web.browser):
   /client/css/index.scss: Scss compiler error: Undefined variable:
   "$small-and-down".

   /client/css/login.scss: Scss compiler error: ".forgot .login-row" failed to
   @extend ".row".
   The selector ".row" was not found.
   Use "@extend .row !optional" if the extend should be able to fail.

   /client/css/map.scss: Scss compiler error: Undefined variable:
   "$small-and-down".
=> Your application has errors. Waiting for file change.

[charlesdagenais]

@tomscholz you forgot to rename /sass/style.scss file to sass/_style.scss

[tomscholz]

@charlesdagenais Thats true, but now I changed the name, it didn't change anything :/ Even when I delete _style.scss and ghpages-materialize.scss I get the same error

[charlesdagenais]

@tomscholz Just tried your fork of the materialize package in my app and it's working perfectly fine. looks like the problem is in your index.scss and login.scss and map.scss

[charlesdagenais]

@tomscholz if you want to use variables in your custom scss files, you need to import them from the materialize package

[MuyBien]

Hi everybody!
I have the same problem and I cannot find the style.scss file in my project directory.
Where are those files going from the .meteor directory ?

Thanks gor your help

[tomscholz]

@MuyBien Clone the materialize repo into the /packages folder inside your project folder.
Via shell:

cd /path/to/YOURPROJECTFOLDER
mkdir packages
cd packages
git clone https://github.com/Dogfalo/materialize.git

Then open this file inside the materialize folder in your packages folder.

and change

  name: 'materialize:materialize',  // http://atmospherejs.com/materialize/materialize

to something like this:

  name: 'tomscholz:materialize',  // http://atmospherejs.com/materialize/materialize

Then run:

meteor remove materialize:materialize
meteor add tomscholz:materialize

Than follow the instructions here https://github.com/Dogfalo/materialize/issues/3905#issuecomment-261996137

et voilà
Also check this out --> https://github.com/Dogfalo/materialize/pull/3924

UPDATE

Due to some badge refactorisation blalala you need to add the _badge.scss to your packages.js:
Like here https://github.com/Dogfalo/materialize/pull/4000/commits/b8f3aeeda1d905546c00772af0f33ff39094f951

[MuyBien]

Huuuuuuuuuuuu OK!!!
Thanks ! And when your PR will be accepted I can run:

meteor remove tomscholz:materialize
meteor add materialize:materialize

[tomscholz]

@MuyBien Yes ;D. Totally. You got it

[tomscholz]

https://github.com/Dogfalo/materialize/issues/2217#issuecomment-268100489

[Dogfalo]

Both PR have been merged, will be closing this issue for now unless further issues pop up.