how to override Angular library scss variables?

Question

I created a library in Angular 12 and I have implemented several components, I wanted to standardize the styling colors so I also implemented scss variables, I have created a SCSS file:

lib\dinotable.scss
$primary-color: green;
$secondary-color: red;

But I also want the library consumers to be able to override the colors in their consuming applications, how can I let them override the variables inside dinotable.scss?

you can find the library here: https://github.com/chr1soscl/dinolib, use "npm run pack-dt" to build and pack the library, the consumer application is here: https://github.com/chr1soscl/dinolib-consumer

Answer 1

I would suggest to make a seperate SCSS file, maybe called overrides.scss, where the consumers can override the variables themselves. However, you need to make sure that the override styles imported after the default Angular SCSS. This means, you'll maybe have something like:

lib\global-variables.scss

$primary-color: green;
$secondary-color: red;

@import 'overrides.scss'

Note: SASS are deprecating the @import feature and changes it to @use instead in the future.