- Issue created by @cYu
Building out from a Starterkit theme, I've seen some behavior related to these 3 files that makes me wonder if I'm misusing them in some way. I'm hoping I can get some clarity on a few questions...
Should _init.scss only be importing files that do not generate any css?
Since every component with a SASS file will likely start with importing init, it seems important that there is no CSS code coming from this (only functions, mixins, variables, etc.). With CSS aggregation turned on, my aggregated file ends up having any CSS that gets generated in init repeated for as many components as I have, so I suspect this is how the file should be utilized, but I wanted to make sure.
On that note, can the import of "~bootstrap/scss/root" be removed from _init.scss?
I am getting CSS code from this import. I don't think this has any utility in init, and is imported in _bootstrap.scss, so perhaps this can be removed from _init.scss without any negative side effects.
Does _bootstrap.scss need to import init?
If bootstrap is only utilized in the context of main.style.scss, where init is imported before bootstrap, is there any reason for this import to be there?
Similarly, is there any reason to import "~bootstrap/scss/utilities" in _bootstrap.scss?
This is being imported in init, so I think we can remove it from bootstrap. Since it doesn't generate CSS, keeping it here should only be a negligible hit to the build process, but if it isn't necessary, it might as well be removed.
Is it odd to include custom stylesheets in _bootstrap.scss instead of having those all in main.style.scss?
The scenario where I want to do this is with some custom styling for buttons. When I put my custom stylesheet import directly under the ~bootstrap/scss/buttons import in _bootstrap.scss I get the behavior I'm looking for, but when I import in main.style.scss I do not. Using a radix accordion component, by default the accordion buttons have a .btn and .accordion-button class with the same specificity, and out of the box this gives .accordion-button precedence since bootstrap's accordion module loads after buttons. If I load my .btn styling in main.style.scss, where it seems it should go, it will take precedence over .accordion-button. I don't know if it will be common that we'll hit issues where the import order between bootstrap modules and custom styling will be important, but at least in this case it is and I'm curious if this way of handling it seems off.
If some of the adjustments here make sense to put into a MR, please let me know and I can put that together. Thanks!
Active
6.0
Code