CODEWITHSUNDEEP
angularsassangular-cli
AndrewBenjamin
AndrewBenjamin

Reputation: 779

SCSS color variable failing to compile in Angular component

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?

Upvotes: 1

Views: 1302

Answers (2)

aiherrera
aiherrera

Reputation: 165

Just use it like this:

$orange: #ED7000;

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

Upvotes: 2

Sam
Sam

Reputation: 1861

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.

Upvotes: 1

Related Questions