Error "module build failed" when importing with @angular/cli

What MDC-Web Version are you using?

0.3.10

What browser(s) is this bug affecting?

All

What OS are you using?

Linux (Fedora 23), Node v6.11.0, npm v5.2.0

What are the steps to reproduce the bug?

Start an @angular/cli project, install for instance @material/select, and add following to styles.scss.

@import '~@material/select/mdc-select';

Run project with npm start

What is the expected behavior?

It should compile fine.

What is the actual behavior?

The following error is output:

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/@angular/cli/~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed: 
@import "@material/animation/functions";
^
      File to import not found or unreadable: @material/animation/functions.
Parent style sheet: /workspace/WISTWFU/wist-wfu-app/frontend/frontend-js/node_modules/@material/select/mdc-select.scss
      in /workspace/WISTWFU/wist-wfu-app/frontend/frontend-js/node_modules/@material/select/mdc-select.scss (line 17, column 1)
 @ ./src/styles.scss 4:14-215
 @ multi ./~/primeng/resources/primeng.min.css ./src/styles.scss
webpack: Failed to compile.

Any other information you believe would be useful?

A simple modification of the mdc-select.scss file makes it possible to import it correctly: Simply adding ~ to the package imports.

@import "~@material/animation/functions";
@import "~@material/typography/mixins";
@import "~@material/theme/mixins";
@import "~@material/rtl/mixins";

However I’m hesitant to submit my own pull request, since it would impact every component package.

[mischkl]

@yeelan0319 unfortunately this does not solve the problem for me, as I am using Angular CLI 😢 And that is actually what this issue is about.

Regarding the documentation: IMHO it’s missing specific information about how to configure Webpack. This seems to be exactly the line I mentioned from material-components’ own webpack.config.js file; modified for end-users I guess it would be something like:

includePaths: glob.sync('node_modules/@material/*').map((d) => path.join(__dirname, d))

Why not include that directly in the README, instead of just a vague statement that node_modules needs to be in the Sass include path?

Likewise for people using node-sass directly - IMHO it would be much more helpful to have a concrete code snippet.

[patrickgdl]

This one worked for me on Angular 7.x:

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

You must nclude the same stylePreprocessorOptions on projects.yourProjectName.architect.build.options and projects.YourProjectName.test.options.