Bootstrap SCSS variable override not generating any CSS

[TheAnachronism]

I've tried to override some Sass variables of bootstrap 5 but there doesn't seem to be any css generated from it. bootstrap is installed with libman so all the bootstrap scss, css and js files are in wwwroot/lib/bootstrap/.

Then in wwwroot/css/ I have a bootstrap.override.scss file in which I followed the steps here: https://getbootstrap.com/docs/5.0/customize/sass/#importing and set i.e. $body-bg: #21232D Then I included bootstrap.override.css in the index.html file head. But once I build the project the bootstrap.override.css is empty.

I'm quite new to Sass so probably I missed something, I just have no idea what...

[JelleHissink]

Could you somewhere post a small reproduction (e.g. a github repo) only including the minimum you want to work?

[TheAnachronism]

https://github.com/TheAnachronism/Libsassbuilder-bootsrap-example This should contain everything I tried. Like I said, maybe I missed something about SASS or how bootstrap handles it but from my current knowledge, this should override the primary color for all bootstrap and as a result the button on the counter page should have a different color.

[JelleHissink]

bootstrap.override.scss: $primary: #ff0000;

@import "../lib/bootstrap/scss/bootstrap.scss";

remove the link to lib/bootstrap/scss/bootstrap.css in index.html because your .override file already contains all the bootstrap you need.

[JelleHissink]

I could make a pull request, but those are the only two changes I made then when you hover on the counter page the button changes to the $primary color you specified

[TheAnachronism]

Huh, tried it out in the example and it works So I guess the docs from bootstrap are wrong? or maybe it just would've worked if I removed the lib/bootstrap/scss/bootstrap.css link.

[JelleHissink]

What happened was you made a .override.scss file that only rendered the mixins and variables to a .css file. That css file was essentially empty.

What we now do is we set variables and then render the entire bootstrap file after that, so a new bootstrap.override.css gets generated, effectively including all of bootstrap.

Just look at the documentation from bootstrap itself again. You did option B, but did not include any of the Components (comment 4). I went for the easier option A, because you already included the entire bootstrap anyway.

[JelleHissink]

Could you close this issue if this is now resolved?

[TheAnachronism]

Alright thx for the help even though it didn't really had to do something with your tool.

[JelleHissink]

No problem, your example project made it easy to see where it went wrong.