Material Components - Web import from node to meteor


#1

Hi

I am a beginner in the web development world and I am trying to import the material components web (not MDL) into meteor.

While I have installed the material components for web from Material.io, I am unable to import the whole material component library into meteor.

Kindly help with the code to do the same.

Regards
SK


#2

Same issue here. When importing material-components-web

@import "{}/node_modules/material-components-web/material-components-web";

I get the following error message:

   While processing files with fourseven:scss (for target web.browser):
   /client/stylesheets/Application.scss: Scss compiler error: File to import: @material/animation/mdc-animation not found in
   file: {}/node_modules/material-components-web/material-components-web.scss

I guess this is due to the structure of mdc. The material-components-web.scss file imports all the single components, that are located in node_modules/@material.

I am using fourseven:scss to compile sass in my meteor application. Does anyone have any ideas or suggestions how to solve this problem?


#3

I also am using forseven:scss and am trying to understand how to load MDC-Web into a blaze/meteor project.

I thought it might be as easy as creating a /scss-config.json at the root per the forseven:scss instructions but it didn’t resolve the issue.

scss-config.json

{
  "includePaths": [
    "{}/node_modules/@material/",
    "{}/node_modules/material-components-web/"
  ]
}

main.scss

@import "material-components-web/material-components-web";

#4

Hi, did you manage to get this thing working?

I’m facing the same issue here and don’t really know how to use material-components-web npm package with Meteor.


#5

I’m using material-ui instead


#6

Eh yet another reason to learn React… :slight_smile:


#7

Since Jan 2017, there’s been an Atmosphere package to use MDC with Meteor, zodiase:mdc. I found it a bit cryptic to use - there’s no componentization from what I can tell, but perhaps @zodiase can correct me.

https://github.com/jamesmfriedman/rmwc was easier to work with, once you manage to import the CSS. Copy/pasting React demo code just works.