How to use npm materialize-css package with material-ui in Meteor 1.3?

I’m trying to figure out how to use the npm materialize-css package in Meteor 1.3. I’m just using Materialize for the grid system. I tried using this in one of my SCSS files:

@import "{}/node_modules/materialize-css/sass/materialize.scss";

But it yielded the following error:

While processing files with fourseven:scss (for target web.browser):
/client/styles/main.scss: Scss compiler error: File to import:
{}/node_modules/materialize-css/sass/materialize.scss not found in file:

This seems like it should be a pretty simple thing.

I should also point out that I’m using material-ui, and I don’t want there to be any conflicts in styles. I just want to be able to use the materialize grid and mobile off-canvas nav.

Below is an example of materialize and material-ui conflicting: (note the double underline in the focused TextField and the unnaturally small floating label)

The problem with css,less,scss,styl imports from node_modules :

Bummer. So, no solution yet, looks like.

yes, for me it’s a serious blocker. I can’t imagine using front-end tools from Npm without this.

Any news about that? I tried to use Materialize in a fresh project. The only way to load it is to add a cdn version in the layout template, as script.

I tried the package, the npm and the direct import of the css and js files, with assets (fonts and icon) in public folder. All of these solutions failed.

Until the node_modules import issue is resolved, try using the poetic:materialize-scss Atmosphere package.


I also combine that Meteor package and NPM package materialize-css for the React components. Works fine.

I am using a combination of materialize and material-ui in my project. I had the same issue of double lines when using material-ui form elements. I couldn’t get rid of materialize completely because I wanted to use its grid structure. I resolved it by:

  1. removing the materialize:materialize package.
  2. Added fourseven:scss package
  3. Copied the grid scss file from materialize github in my own client/stylesheets directory. You also need to copy their variables file. (Make sure to configure load order of SCSS files correctly.)

I am also using waves feature of materialize that needs a corresponding js file to work. So I copied waves.js in my client/lib folder and it worked.

1 Like

Worked nicely, thanks!

@hwillson It’s also giving issues

I’m interested to know if this has been fixed, or updated to work with an import command.

I’ve used meteor npm install materialize-css, but adding it as a ref and script in head of main.html isn’t working.