1

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

rycirese
  • 179
  • 1
  • 14
  • Are you doing it in global styles and not component-level? – Sergey Oct 31 '19 at 20:11
  • Ideally I'd be able to use them globally. Currently I've tried both the global stylesheet and component styles – rycirese Oct 31 '19 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 Oct 31 '19 at 20:17
  • Also, just for try - try to change `red` onto some hex code – Sergey Oct 31 '19 at 20:17
  • I got it just now! I had to surround my css variable like ```#{var(--my-test-var)}``` and that made it stick around. – rycirese Oct 31 '19 at 20:27
  • Kind of weird since you are not dealing with SCSS variables – Sergey Oct 31 '19 at 20:27
  • 1
    It works with latest version. https://stackblitz.com/edit/angular-p7h5vv Maybe it's worth deleting `node_modules` and running `npm i` to reinstall sass compiler – Sergey Oct 31 '19 at 20:30
  • I'll mess around some more and see if I can figure out why it's slightly different for me. Thanks for the help! – rycirese Oct 31 '19 at 20:32

1 Answers1

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;
TheCoderGuy
  • 771
  • 6
  • 24
  • 51