Customizing Bootstrap 4 (specific modules and overriding variables) in Sage 9

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

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 resources/scripts/autoload/_bootstrap.js from

import 'bootstrap';

to something like

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
...etc

Including only specific SCSS modules:

You’d have to modify resources/styles/autoload/_bootstrap.scss - change from

@import "~bootstrap/scss/bootstrap";

to something like

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";
...etc

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.

That should help you out, good luck!

4 Likes

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 */
@import "./autoload/**/*";

If you didn’t install font awesome, you can remove that line. If you did, change to this:

/** Manually import autoload */
@import "./autoload/fontawesome";

Then above the npm dependencies block add the specific components for bootstrap like such:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";
//...etc

/**
 * 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 */
@import "common/global";
@import "components/buttons";
3 Likes

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!