Cannot @import scss

I really want to use your library, especially with Sass, however I can’t @include the .scss styles with my current configuration. That is using Webpack 2 and sass-loader. Here is an example project. Here is a comment describing the issue - basically I can’t import the .scss (of button in this case) neither with relative paths nor with the ~ alias to node_modules that node-sass / sass-loader supports. The problem in this case is @import "@material/animation/variables”;. I expect there would be many other similar imports in the library… Do you have / know of a working Webpack 2 example?

I thought Eyeglass would help, but I can’t set that up with Webpack 2. Here is an eyeglass issue and my comment on it that has a broken version of my config trying to tell sass-loader to use eyeglass for importing.

So I’m trying this with material-components-web@0.4.0 and more specifically @material/button@0.2.1 importing from its dependency @material/animation@0.1.3. It’s also worth noting that I’m using yarn which keeps a flat directory structure of my dependencies. I wonder if you assume a regular npm install and thus hierarchical dependencies?

Here is the example error:

 error  in ./pages/index.js.scss

Module build failed:
@import "@material/animation/variables";
^
      File to import not found or unreadable: @material/animation/variables.
Parent style sheet: /Users/om/Dev/mel/drmelgill.com/node_modules/@material/button/mdc-button.scss
      in /Users/om/Dev/mel/drmelgill.com/node_modules/@material/button/mdc-button.scss (line 17, column 1)

 @ ./pages?entry 43:15-41
 @ multi ./~/next/dist/client/webpack-hot-middleware-client ./pages?entry

Either of these two would cause it, and mdc-button.scss is found in both cases:

• @import '../node_modules/@material/button/mdc-button.scss’; // valid relative path
• @import '~@material/button/mdc-button.scss’; // ~ = node_modules

So I’m not really sure if this is about configuration help, documentation example, bug report, or a feature request…

[thasmo]

Would it be possible to use ~ (tilde) by default for @import statements in the material-components/material-components-web project? So it will automatically work with sass-loader, node-sass-magic-importer, node-sass-package-importer, etc.

@import "~@material/textfield/mdc-text-field";

[mischkl]

As mentioned in #981 this unfortunately is no help to @angular/cli users, who can’t configure the includePaths dynamically.

(It’s kind of impressive to see firsthand how uncoordinated the various development teams at Google are with each other.)

The crux of the problem seems to be twofold: first of all, node-sass itself doesn’t support scoped NPM packages. Second of all, sass-loader for webpack doesn’t support package imports that don’t start with tilde (~) - and users of @angular/cli can’t use @Elemecca’s workaround, either. Only eyeglass appears to support material-components as-is, but I would guess the user base of eyeglass is significantly smaller than that of node-sass and @angular/cli combined.

IMHO both of these problems (node-sass not processing scoped packages as well as sass-loader in @angular-cli not processing packages without a ~) need to be fixed in order for the current state of material-components to be considered acceptable for general consumption. Thus, it would be great if the material-components maintainers could get involved.

Here are relevant existing issues: https://github.com/sass/node-sass/issues/1596 https://github.com/webpack-contrib/sass-loader/issues/466