Material-components-web: Import scss file error

[maskletter]

• angular v6.0.3

• angular/cli v6.0.8

• @material/top-app-bar v0.37.0

ERROR in ./node_modules/@material/top-app-bar/mdc-top-app-bar.scss Module build failed: undefined ^ File to import not found or unreadable: @material/elevation/mixins. in G:\angular5\material-angular\node_modules\@material\top-app-bar\mdc-top-app-bar.scss (line 17, column 1)

Can't be used together?

[maskletter]

[maskletter]

[williamernest]

@maskletter Thanks for filing this issue. First, you have to update your angular.json (formerly angular-cli.json) to use the node_modules as an includePaths for Sass. You can do this by adding the following block to your angular.json file in the project.architect.build.options section.

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

Then, you want to create your own scss file to import the top app bar into (so you can add your own custom styles to the top app bar using our mixins).

Here's a few reference links to help.
https://github.com/angular/angular-cli/blob/5b1668f9ba39175e0f57fe23df6672ec40c3b745/docs/documentation/stories/global-styles.md

https://github.com/angular/angular-cli/issues/10473

Here's an example repo
https://github.com/williamernest/mdc-web-angular-example

You might want to consider using the open source Angular MDC lib if you just want to build an app using our components.
https://github.com/trimox/angular-mdc-web

[maskletter]

Thank you