Angular2+ UI library expose SCSS variables

Question

I am building own UI lib for internal use in my projects. I already have some modules ready and started using it and it make me think how can I 'expose' scss variables to be overwritten in application consuming that library. Something like what ionic is doing for its components (on each component there is list of scss variables it is using which can be overriden in apps scss.

user4676340 · Accepted Answer · 2018-06-04 06:55:06Z

2

Make two files : one for configuration, one for styling.

The user will import the configuration, edit the variables, then import the styling. This would give

@import 'myLib/variables';

$color: green,
$background: yellow;

@import 'myLib/styling';

answered Jun 4, 2018 at 6:55

user4676340

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

2 Comments

John Over a year ago

This was my first thought as well.

Chaki Over a year ago

Thanks, made it working this way. I didn't think of doing that before for some reasons. I was trying to use compiled css files

Muhammed Albarmavi · Accepted Answer · 2018-06-04 07:26:58Z

1

Usualy you will start with _variables.scss , theme.scss (where you import all prtial files ) , but as advice you have to create a prtial scss file for each component like dropdown , card , button ....etc for example primeng has something like this and you may give a look to bootstrap repo.

answered Jun 4, 2018 at 7:26

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Collectives™ on Stack Overflow

Angular2+ UI library expose SCSS variables

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related