CODEWITHSUNDEEP
cssangulartypescriptsass
Lwadzswagger
Lwadzswagger

Reputation: 31

Globally import scss variables, to be usable on all angular components

I have an internal library that has the colour variables, Im able to grab it from the node_modules and import it on any component basically, I have imported it in the styles.scss in hopes that the child components would inherit the variable making easy to use the colours.

the challenge that I'm facing is that I need to import the variables on every component before using them even though I have them imported on the styles.scss. I would like to be able to use the colors on any component basically have them imported globally and use all over the project

I have looked into this, (Angular SCSS Global Variable Import) similar question, but seems for every use you need to import which is what I don't wanna do

the (Global scss variables for Angular components without importing them everytime) first answer seem intriguing and I would like to use it in that sense, but my variables are like those of the second answer, please help

Upvotes: 1

Views: 346

Answers (1)

Lwadzswagger
Lwadzswagger

Reputation: 31

After a thorough google search and hair pulling, finally realised the only way to achieve what I'm looking for is to add my variables to the :root pseudo. this way I was able to import the variable once on my main styles and just use them throughout on any component level

Upvotes: 1

Related Questions