Context: creating an angular component library from existing angular components. The aim is to gradually move most components from the current app to the library. For reasons of time and as many of the app's components use Bootstrap, it was decided to integrate Bootstrap into the library.
Problem: First, I had to find a solution to export the CSS bootstrap in isolation. I'm using ng-packagr as a builder, so I added Bootstrap to the "styleIncludePath" property but got no results. I couldn't get a global boostrap style that could be used for all my components. (and I think that would solve my problem). I then tried importing the necessary CSS into the component's stylesheet (@import '../../../node_modules/bootstrap/scss/bootstrap.scss'; or min.css) AND/OR from the .component.ts file into styleUrls, both of which lead to the problem I'm experiencing and a behavior I can't explain.
I created a -btn btn-primary- button to test the integration. The bootstrap CSS is correctly isolated in the library and does not interfere with other boostrap components in the app. However, this CSS differs once the component has been built and used. Let me explain: Here's the component created for the test and executed from the Angular application containing the components from my library: library button primary no build
The behavior is normal so far; then I build my library, create a blank angular project, and import it like this: library button primary build in new app
Here's where the problem starts: I'm missing a piece of CSS bootstrap. Specifically, when I look in the browser, several variables are grayed out and therefore missing: bootstrap css in angular library component
Let's take the border-radius example and its missing --bs-border-radius variable. When I search in the style file declared on the browser, the variable is present and declared; in fact, all bootstrap variables are well declared: all variables style declared in browser
So, I'm wondering why the browser does not use declared variables and what could cause this behavior.
I've tested under Chrome, safari, and Mozilla, and the behavior is the same everywhere.
This is my first post here; I hope it will be precise enough for someone to help me. I've spent several days looking for answers and solutions... you're my last hope.