Import sass from npm package, that imports sass from another npm package

[tomscholz]

Before I get into this, I know there are several issue with importing sass from a npm package, but I think that this is a little bit different, since the sass file I am importing is trying to import another sass file from another npm package.

Here we go: I want to use material design components for web inside my meteor application. Unfortunately when importing mdc from the npm package like this:

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

I get the following error:

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, not inside node_modules/material-components-web.

Any suggestion how I can resolve this?

[vuhrmeister]

You need to create a scss-config.json file as described here: https://github.com/fourseven/meteor-scss#global-include-path

The content of that file would be:

{
  "includePaths": [
    "{}/node_modules/"
  ]
}

However, with that it's not done. It fails with File to import: ./mixins not found. Here I'm stuck, too, didn't find a solution yet.

[yanickrochon]

This is perhaps one of the most frustrating "feature" of this package....

[tomscholz]

I've learned react and use material-ui now. That solved the problem for me

[macrozone]

this used to work with meteor 1.6.1 but is now broken with meteor 1.7