如何覆盖 Angular 库 scss 变量？

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 trying to set the variables in the TS file instead, and let the end user override it in general configuration. Take a look at this: access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)

Answer 2

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.