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

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