use mdc sass files in angular-cli projects

Question

I have a project using angular-cli. I am using mdc components/. I want to import individual component's sass files. For this,

1) I have changed the default styleExt using this command

ng set defaults.styleExt scss

2) Renamed the file style.css to style.scss.

3) In angular-cli.json changed

"styles": [
        "styles.css"
      ],

to

"styles": [
        "styles.scss"
      ],

4) Added stylePreprocessorOptions configuration to include path

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

5) Finally in style.scss file imported

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

but this is showing

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precis
ion":8,"includePaths":["D://SK//Study//Material//MaterialWithAngularDemo//src//node_modules"]}!./src/styles.scss
Module build failed:
undefined
^
      File to import not found or unreadable: @material/theme/mixins.
Parent style sheet: D:/SK/Study/Material/MaterialWithAngularDemo/node_modules/@material/button/mdc-button.scss
      in D:\SK\Study\Material\MaterialWithAngularDemo\node_modules\@material\button\mdc-button.scss (line 17, column 1)
 @ ./src/styles.scss 4:14-187
 @ multi ./src/styles.scss

Am I missing something?

Answer 1

There was a mistake in includePath instead of node_modules it should be ../node_modules.

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

After changing this, it is working fine.