Angular 7 SCSS Doesn't Keep CSS Custom Properties

Question

I'm trying to use CSS Custom properties in my Angular 7 app but am running into issues where building down to css gets rid of the property that is set to a CSS variable.

SCSS

:root {
  --my-test-var: red;
}

.testclass123 {
  height: 150px;
  background: var(--my-test-var);
}

Builds down to:

:root {
  --my-test-var: red;
}

.testclass123 {
  height: 150px;
}

If I use a fallback options like var(--my-test-var, purple); then .testclass123 will also have property background: purple;

My Angular version is 7.2.7 and Angular Material 7.3.7

Ideally I'd be able to use them globally. Currently I've tried both the global stylesheet and component styles — rycirese
– rycirese, Commented Oct 31, 2019 at 20:13
Can you reproduce it on StackBlitz? Also, I suppose that you may run some sort of pet project and if it so it would be better to switch onto 8th version (why use obsolete)? Anyway, to answer this question we need either a StackBlitz example or GitHub project to investigate — Sergey
– Sergey, Commented Oct 31, 2019 at 20:17
It works with latest version. stackblitz.com/edit/angular-p7h5vv Maybe it's worth deleting node_modules and running npm i to reinstall sass compiler — Sergey
– Sergey, Commented Oct 31, 2019 at 20:30

TheCoderGuy · Accepted Answer · 2019-10-31 20:53:37Z

0

If you use SCSS as global style you can define like this the color. This is the best approach.

$product: red;

And then only you call when you need like this.

background-color: $product;

answered Oct 31, 2019 at 20:53

TheCoderGuy

8957 gold badges25 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 7 SCSS Doesn't Keep CSS Custom Properties

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related