File to import not found or unreadable: @material/button/mdc-button

Question

I use Angular v6.1.2 And just initial project following getting start guild. Then I add MDC following this link https://www.npmjs.com/package/material-components-web,

Then in my project at styles.scss file I just import MDC scss like this

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

Then I run the application it shows me this error

Module build failed: @import "@material/button/mdc-button"; ^ File to import not found or unreadable: @material/button/mdc-button. and so on...

I've tried to add a path in angular.json like the code below but it doesn't work.

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

Is there anything else that I miss?

Answer 1

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

Just include on node_modules path, because of material-components-web and @material need to know the parent path.