Hi
I need to include specific css/js modules of Bootstrap 4 and not the entire Bootstrap library. What is the correct way to do it in Sage 9?
Then I need to:
1- override Bootstrap variables with new values (ie: $tooltip-bg: #999;)
2- override Bootstrap variables with with my custom variables (ie: $tooltip-bg: $my-tooltip-color;)
3- override Bootstrap variables assigning them other Bootstrap variables (ie: $tooltip-bg: $white;)
4- define custom variables related to the project (ie: $my-tooltip-color: #777)
Where I have to place these overrides? If I put them in _variables.scss points 2 and 3 don’t work. It’s not clear what’s the best way in Sage 9.
Hoping in an helpful answer!
Thanks
Here’s a good reference on how to import specific js modules; you’d want to change the declaration in resources/scripts/autoload/_bootstrap.js from
Overriding Bootstrap variables
Make sure your variables (e.g. $my-tooltip-color and $white) are defined in the same file, prior to your overrides.
This would work:
$my-tooltip-color: #777;
// $my-tooltip-color is defined before it's referenced
$tooltip-bg: $my-tooltip-color;
This would not:
$tooltip-bg: $my-tooltip-color;
$my-tooltip-color: #777;
// $my-tooltip-color is defined after it's referenced
If you want to define a style or variable with a reference to a default bootstrap variable, copy the variable from Bootstrap’s _variables.scss to your _variables.scss and remove the !default flag.
About the import of specific bootstrap modules: in the file resources/styles/autoload/_bootstrap.scss there’s a comment saying to not edit that file
// `sage preset` installed this file automatically.
// Running `sage preset` again could result in automatic deletion of this file.
// Because of this, we do not recommend editing this file.
If you were to re-run the sage installer, it could overwrite that file, though there’s a prompt to ask first before it gets overwritten. I would guess few people re-run the installer once they’ve picked a framework, unless they’re changing frameworks or want to reset the framework files. If you’re using git for the project (which I really hope you are!) there’s little risk here.
If you really, really want to avoid editing that file, you can go through resource/styles/main.scss by changing
/** Import everything from autoload */
@import "./autoload/**/*";
If you didn’t install font awesome, you can remove that line. If you did, change to this:
This is exactly the answer I was looking for. I did a search in discourse.roots.io (How to limit Bootstrap files or variables in Sage 9) and didn’t get a good result. I saw my search term in the google button and it gave me this page. Works great. I didn’t have to ask (re-ask) the question. I think stackoverflow could learn something from this feature.
I have a follow-up question for you… If, for example, I wanted to change the default values within Bootstrap “_reboot.scss”, should I change THIS file?
Normally I would just override within global, however, the specific CSS Fix “[tabindex=”-1"]:focus " needs to be removed.
Is there a way to remove a specific portion of a default Bootstrap file? I need the rest of the file…