Theming Angular Apps and Libraries with Bootstrap and sass

2
votes

I am using a MonoRepo approach for building customer Apps. All of my logic like components are in several Angular libraries. For every customer I will have a different App to make some configuration in it and provide the layout the customer wants. Furthermore in each customer App I would like to overwrite bootstraps theme-colors. In the libraries/components I would like to access the theme-colors.

Here is the problem: In the components.scss files in my libraries I cant import variables.scss neither from bootstrap (because then I would have the default colors) nor from my app (because then I would have the colors of one specific customer in all my library components).

How can I solve the problem to style every app individually using scss?

1
angulartwitter-bootstrapsassbootstrap-4
Bootstrap utilizes css variables (check :root) and therefore you can simply overrite them and thus have themed most of the components which can be changed on fly by changing css variable - Sergey
@Sergey I know but it seems as bootstrap doesn´t want to change to css variables at all. So I don´t know how reliable this is. See this Github discussion: github.com/twbs/bootstrap/issues/26596 - Max
Have you thought about splitting the theme-variables in another file? Then you can first include the global styles and include the theme variables from a dynamic customer url. Or, create the components with only utility classes and style those for each customer. - Luuk Skeur

1 Answers

3
votes

I can suggest you trying this option discussed on StackOverflow. It utilizes includePaths approach instead of fileReplacements (which was my first thought but for now Angular doesn't work with SCSS).

I believe that you can build using different configuration and replace SCSS variables file depending on a project you build. Unfortunately this approach requires polluting angular.json file with tons of configurations for each project that requires its own styling.