Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

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

Closed
YoannBureau opened this issue Nov 23, 2017 · 1 comment

Comments

@YoannBureau
Copy link

YoannBureau commented Nov 23, 2017

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"
  ]
}
  1. Import the sass material-components-web in styles.scss file by using @import "~material-components-web/material-components-web";
  2. 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
Copy link
Contributor

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants