CODEWITHSUNDEEP
angulartwitter-bootstrapsassbootstrap-4
Max
Max

Reputation: 1210

Theming Angular Apps and Libraries with Bootstrap and sass

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?

Upvotes: 2

Views: 365

Answers (1)

Sergey
Sergey

Reputation: 7682

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.

Upvotes: 3

Related Questions