SCSS Variables Not Working (Ionic-v4)

Ionic Framework
1

I have a project that won’t let me implement variables. For example, text with this paragraph tag will not be red:

// CSS
:root {
  --text-color: red;
}

p {
  color: var(--text-color);
}

I have other projects where CSS variables work. When I copy and paste from where they’re broken into something like CodePen the variables work fine. Are there settings that would disable variables like these?

2

I think I may have found the answer to my own question, but I hope I’m wrong. It seems that if I put my :root in global.scss then my variables work appropriately. :root in the local scss file is ignored.

At least I can move on with my work.

3

If you looking to use SAAS variables in Ionic 4 then read this article.