Angular CLI / Compile errors "Custom property ignored" and "variable is undefined and used without a fallback"

[YoannBureau]

What MDC-Web Version are you using?

0.25.0

What browser(s) is this bug affecting?

Google Chrome Version 62.0.3202.94 (Official Build) (32-bit)

What OS are you using?

Windows 7 64-bit

What are the steps to reproduce the bug?

1. Create a new Angular CLI project by typing ng new project-name
2. Install material-components-web by typing npm i material-components-web --save
3. Change the app's styles.css file extension to .scss, and reference the new name in the angular-cli.json file. Also provide the node_module path to the stylepreprocessor options so it can find components in node_modules/@Material folder at compilation time

/*angular-cli.json*/

"styles": [
  "styles.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "../node_modules"
  ]
}

4. Import the sass material-components-web in styles.scss file by using @import "~material-components-web/material-components-web";
5. Start the app by typing ng s

What is the expected behavior?

material-components-web scss should not output warnings at compile time

What is the actual behavior?

70+ warnings are triggered, which concern mdc.ripple.css and material-components-web.css. Warnings concern Custom property ignored and variable 'var-name' is undefined and used without a fallback
Full warning log can be found here: https://pastebin.com/PTRPWiDt

Any other information you believe would be useful?

For the fallback problem, I found the following pull request that has been merged, but looks like it's still broken: #367

[bonniezhou]

I'm not an Angular expert but it seems like you're seeing that warning because Angular CLI uses postcss-custom-properties which doesn't support variable declarations on CSS selectors other than :root.

Some more information about this issue:
trimox/angular-mdc-web#376
angular/angular-cli#7991

If you want to use MDC with Angular here are two libraries you can use:
Angular MDC
Blox Material