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

help
1

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:
/Volumes/SuperData/Sites/reelcrafter-new/{}/client/styles/main.scss

This seems like it should be a pretty simple thing.

2

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)

3

The problem with css,less,scss,styl imports from node_modules : https://github.com/meteor/meteor/issues/6037

4

Bummer. So, no solution yet, looks like.

5

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

6

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.

7

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

2 Likes
8

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

9

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
10

Worked nicely, thanks!

11

@hwillson It’s also giving issues https://github.com/poetic/meteor-materialize-scss/issues/23

12

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.