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:
2- override Bootstrap variables with with my custom variables (ie:
3- override Bootstrap variables assigning them other Bootstrap variables (ie:
4- define custom variables related to the project (ie:
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!
Including only specific JS modules:
Here’s a good reference on how to import specific js modules; you’d want to change the declaration in
to something like
Including only specific SCSS modules:
You’d have to modify
resources/styles/autoload/_bootstrap.scss - change from
to something like
Overriding Bootstrap variables
Make sure your variables (e.g.
$white) are defined in the same file, prior to your overrides.
This would work:
// $my-tooltip-color is defined before it's referenced
This would not:
// $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
That should help you out, good luck!
Thanks for answer.
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.
Are you sure that’s the correct way?
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 */
If you didn’t install font awesome, you can remove that line. If you did, change to this:
/** Manually import autoload */
Then above the npm dependencies block add the specific components for bootstrap like such:
* Import npm dependencies
* Prefix your imports with `~` to grab from node_modules/
* @see https://github.com/webpack-contrib/sass-loader#imports
// @import "~some-node-module";
/** Import theme styles */
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.
Very helpful answer, thanks for this!
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…
Cheers, you’re a lifesaver!
Assuming this wouldn’t override somehow, plus it seems like poor practice to modify source files… Thanks again!