Import scss variable into Angular component

Question

Let's say I have the following Angular component:

// src/app/app.component.html
<stars [customColor]="blue">

And I have the following scss variable:

// src/_styles.scss
$color: blue;

How can I use the scss variable instead of duplicating blue?

To clarify, I want to access $color in app.component.html or app.component.ts.

Apparently it's possible to configure Webpack in a React app but I'm not sure if this is possible in Angular.

Marc · Accepted Answer · 2020-05-31 09:02:40Z

2

In your app.component.scss (or star.component.scss) file just import your styles:

@import './../_style.scss'

Then you can use your scss var

edited May 31, 2020 at 9:02

Marc

1,8961 gold badge11 silver badges16 bronze badges

answered May 30, 2020 at 7:22

Eliran Eliassy

1,60012 silver badges25 bronze badges

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

4 Comments

David Over a year ago

Thanks for the answer, but as far as I know, this only gives me access to $color in app.component.scss. How can I access it in app.component.html or app.component.ts?

Marc Over a year ago

This is not possible. (And I think there is not need). Make a smal my.vars.scss and import it to all your sub-components scss. There are some hacks to read the color code from an element, but it's not a usually way.

Marc Over a year ago

An other way is to use css variables (not scss): See: css-tricks.com/updating-a-css-variable-with-javascript

David Over a year ago

Thanks for adding to the discussion! I want to be able to change the color of stars without having to modify stars. See also Applying the open-closed principle to UI components

Collectives™ on Stack Overflow

Import scss variable into Angular component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related