CODEWITHSUNDEEP
angularsassangular-cli
ofir fridman
ofir fridman

Reputation: 2789

Override sass variable from different project

I have multiple projects where I want to override scss color variable from two different projects.

for example, if I'm running project A I want $primaryColor to be red and if I'm running project B I want the $primaryColor to be green

My Project Tree - Project_A - Project_B - Shared_Component_Library - Style_Library - color_palette.scss

both Project_A and Project_B are using the Shared_Component_Library and the Shared_Component_Library get its style from Style_Library.

how can I override the scss color variable with different value when I run my different project?

if it helps I'm using angular-cli in order to build this multiple projects

Upvotes: 0

Views: 269

Answers (1)

BENARD Patrick
BENARD Patrick

Reputation: 30975

There are many ways ....

First :

You've got to put in each project a small scss file with the variable overrided... Those files should include your shared scss file... But it will create 2 files....

First and Half :

If you dont' want to duplicate your whole css file, you can just extract the scss component you need to override in antoher file, which will be duplicated...

Second :

If you are not limited and can make the exception of IE11 (look at here https://caniuse.com/#feat=css-variables), instead af using scss variables, you can just use a css variable...

PS:

I don't give you some code, maybe do you need to see how you can include and overide ?

You could take a look at how is bootstrap 4 done with scss, you'll see how the variables are done...

Upvotes: 1

Related Questions