Customise Bootstrap 4 in Sage 9

sage
,
1

Hey guys,

Just finished a client site using Sage 9, works great. I’m sure you’ve been asked this but I haven’t found an answer in the forums. Now that Bower’s been removed, is there a way to customise BS4? Normally I’d shave off at least 30% from the CSS and JS. Are you planning to add that in the future?

1 Like
2

I think I’ve figured it out - steps I followed were:

  1. Open theme/node_modules/bootstrap/scss/bootstrap.scss
  2. Grab all the imports and paste them into main.scss in the theme, while commenting out the main Bootstrap import
  3. Search and replace @import " with @import "~bootstrap/scss/ on the Bootstrap imports only
  4. Comment out/delete those lines you don’t need

Reduced my compiled CSS from 195K to 142K.

Is that what you’d suggest too? What about Javascript?

6 Likes
3

This is how I’d do it. I use only Bootstrap’s grid and Reboot in our most recent project, it looks like this:
main.scss:

// Import npm dependencies
@import "~bootstrap/scss/bootstrap-reboot";
@import "~bootstrap/scss/bootstrap-grid";

For JS, remember, we’re just using ES6 importing, so just remove this line: https://github.com/roots/sage/blob/master/assets/scripts/main.js#L3 - I’d have to look into it a bit more if you wanted to customize the individual BS components…

2 Likes
4

Yeah more the individual components…

5

You mean just for JS?

6

Yeah, customising BS4 JS components.

7

Something like this?

/** import bootstrap dependencies */
import 'bootstrap/js/src/util';
import 'bootstrap/js/src/alert';
import 'bootstrap/js/src/button';
import 'bootstrap/js/src/carousel';
import 'bootstrap/js/src/collapse';
import 'bootstrap/js/src/dropdown';
import 'bootstrap/js/src/modal';
import 'bootstrap/js/src/scrollspy';
import 'bootstrap/js/src/tab';
import 'bootstrap/js/src/tooltip';
import 'bootstrap/js/src/popover';
2 Likes
8

SCSS seems pretty straight forward with all Sage versions but has anyone found a way to easily customise the Bootstrap JS libraries?

2 Likes
9

I would like to know too, I don’t quite understand what _bootstrap.js in autoload folder does.

It seems it imports all bootstrap with all functionalities.

1 Like
10

Correct. It imports all of Bootstrap at that location in main.scss.