SCSS color variable failing to compile in Angular component

Question

I'm at a loss I must be missing something. This is very simple. Here is the angular component referencing the scss file:

@Component({
    selector: 'base-table',
    templateUrl: './html/base.table.html',
    styleUrls: ['./scss/base.table.scss']
})

Here is the part of the scss (simplified) that is not working:

$orange: #ED7000;
#table-hscroll {
    --scrollbar-thumb-color: $orange;
}

If I don't use the variable, everything works fine. As soon as I use the variable, the color disappears. I've specified scss in angular cli and assume it will be compiled correctly when accessing it directly from a component, but that appears to not be the case.

"schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }

Is there something I don't know about how scss works when directly referenced from components. Is my file not being compiled?

aiherrera · Accepted Answer · 2021-05-11 18:54:05Z

2

Just use it like this:

$orange: #ED7000;

#table-hscroll {
    --scrollbar-thumb-color: #{$orange};
}

answered May 11, 2021 at 18:54

aiherrera

1651 gold badge2 silver badges9 bronze badges

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

2 Comments

AndrewBenjamin Over a year ago

Will try this out. I still use this scroll for all my tables and it's been working fine for a year but I've been stuck with a hard-coded color. Thanks!

AndrewBenjamin Over a year ago

Yep. I can confirm this was all I needed. Was just a syntax issue. Thanks!

Sam · Accepted Answer · 2019-12-04 17:42:46Z

1

If your variable is not directly in your components scss but instead in a global stylesheet, you have to import that global stylesheet within your component's stylesheet. You will need to do this for all your components if they have separate stylesheets.

So within ./scss/base.table.scss' import the stylesheet that contains your variable.

answered Dec 4, 2019 at 17:42

Sam

1,87111 silver badges19 bronze badges

5 Comments

AndrewBenjamin Over a year ago

But the variable is in the component scss. And when I inspect in browser, it looks like this --scrollbar-thumb-color: $orange;. So it's simply not compiling the scss. I would eventually move all these global, but I'm trying to get the simplest thing to work first.

Sam Over a year ago

Have you tried without using a css variable? For example just scrollbar-thumb-color: $orange;

AndrewBenjamin Over a year ago

Yes. If I just use css, it works fine. scrollbar-thumb-color: #ED7000; works fine. But I want to avoid having to go back and change colors all over the application - would rather globalize the variable -- but it won't even work when put in the scss file.

Sam Over a year ago

Just messed around with it and it seems your issue is related to the property you are trying to use the SCSS variable with (--scrollbar-thumb-color). Test it out and try colouring something simple like a background colour with $orange.

AndrewBenjamin Over a year ago

Nailed it! That was it! Now have to sort out how to address that screwy property.

Collectives™ on Stack Overflow

SCSS color variable failing to compile in Angular component

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related