Split Bower Package Overrides Amongst Files

Hey Ben and crew.

I know a lot of you are on to Yarn, Webpack and the rest of Sage9 and I’m excited to delve further into those systems.

We have a Sage8 theme in which I’m hoping to split bower_components/bootstrap/scss/* amongst main.scss and critical.scss so that above the fold content like the nav menu and hero dependencies can be loaded inline.

I’ve tried a few different configurations of bower.json and manifest.json and gulpfile.js.

I have even experimented with migrating from bower to Yarn with boweraway, but wondering about the wisdom of that since the Sage8 library is so well developed already.

I am getting a little caught up in the weeds here and, as usual, looking to y’all for some guidance.

Couldn’t you load the files you want in the bower.json overrides for main.scss, and then just load manually the files you want in critical.scss ?

Perfect. Started by setting Bower overrides for bootstrap, then created critical.scss next to main.scss in assets/styles:

@import "common/variables";

// Bootstrap 4.0
@import "../../bower_components/bootstrap/scss/_functions.scss";
@import "../../bower_components/bootstrap/scss/_variables.scss";

@import "../../bower_components/bootstrap/scss/mixins/_alert.scss";
@import "../../bower_components/bootstrap/scss/mixins/_background-variant.scss";
@import "../../bower_components/bootstrap/scss/mixins/_badge.scss";
@import "../../bower_components/bootstrap/scss/mixins/_border-radius.scss";
@import "../../bower_components/bootstrap/scss/mixins/_box-shadow.scss";
@import "../../bower_components/bootstrap/scss/mixins/_breakpoints.scss";

// needed for buttons.
@import "../../bower_components/bootstrap/scss/mixins/_transition.scss";
@import "../../bower_components/bootstrap/scss/mixins/_hover.scss";
@import "../../bower_components/bootstrap/scss/mixins/_gradients.scss";
@import "../../bower_components/bootstrap/scss/mixins/_buttons.scss";
@import "../../bower_components/bootstrap/scss/_buttons.scss"; // needed for forms mixin.

@import "../../bower_components/bootstrap/scss/mixins/_caret.scss";
@import "../../bower_components/bootstrap/scss/mixins/_clearfix.scss";
@import "../../bower_components/bootstrap/scss/mixins/_float.scss";
@import "../../bower_components/bootstrap/scss/mixins/_forms.scss";
@import "../../bower_components/bootstrap/scss/mixins/_grid-framework.scss";
@import "../../bower_components/bootstrap/scss/mixins/_grid.scss";
@import "../../bower_components/bootstrap/scss/mixins/_image.scss";
@import "../../bower_components/bootstrap/scss/mixins/_list-group.scss";
@import "../../bower_components/bootstrap/scss/mixins/_lists.scss";
@import "../../bower_components/bootstrap/scss/mixins/_nav-divider.scss";
@import "../../bower_components/bootstrap/scss/mixins/_navbar-align.scss";
@import "../../bower_components/bootstrap/scss/mixins/_pagination.scss";
@import "../../bower_components/bootstrap/scss/mixins/_reset-text.scss";
@import "../../bower_components/bootstrap/scss/mixins/_resize.scss";
@import "../../bower_components/bootstrap/scss/mixins/_screen-reader.scss";
@import "../../bower_components/bootstrap/scss/mixins/_size.scss";
@import "../../bower_components/bootstrap/scss/mixins/_table-row.scss";
@import "../../bower_components/bootstrap/scss/mixins/_text-emphasis.scss";
@import "../../bower_components/bootstrap/scss/mixins/_text-hide.scss";
@import "../../bower_components/bootstrap/scss/mixins/_text-truncate.scss";
@import "../../bower_components/bootstrap/scss/mixins/_visibility.scss";

@import "../../bower_components/bootstrap/scss/utilities/_align.scss";
@import "../../bower_components/bootstrap/scss/utilities/_background.scss";
@import "../../bower_components/bootstrap/scss/utilities/_borders.scss";
@import "../../bower_components/bootstrap/scss/utilities/_clearfix.scss";
@import "../../bower_components/bootstrap/scss/utilities/_display.scss";
@import "../../bower_components/bootstrap/scss/utilities/_embed.scss";
@import "../../bower_components/bootstrap/scss/utilities/_flex.scss";
@import "../../bower_components/bootstrap/scss/utilities/_float.scss";
@import "../../bower_components/bootstrap/scss/utilities/_position.scss";
@import "../../bower_components/bootstrap/scss/utilities/_screenreaders.scss";
@import "../../bower_components/bootstrap/scss/utilities/_sizing.scss";
@import "../../bower_components/bootstrap/scss/utilities/_spacing.scss";
@import "../../bower_components/bootstrap/scss/utilities/_text.scss";
@import "../../bower_components/bootstrap/scss/utilities/_visibility.scss";


@import "../../bower_components/bootstrap/scss/_reboot.scss";
@import "../../bower_components/bootstrap/scss/_forms.scss";
@import "../../bower_components/bootstrap/scss/_functions.scss";
@import "../../bower_components/bootstrap/scss/_variables.scss";
@import "../../bower_components/bootstrap/scss/mixins/hover";
@import "../../bower_components/bootstrap/scss/mixins/border-radius";
@import "../../bower_components/bootstrap/scss/_grid.scss";
@import "../../bower_components/bootstrap/scss/_transitions.scss";

@import "components/navigation";

@import "../../bower_components/bootstrap/scss/_dropdown.scss";
// Use our modified version of the file.
@import "components/navbar.scss";
@import "../../bower_components/bootstrap/scss/_nav.scss";

Lots of parts of BS depend on other parts. And in the gulpfile:

// Critical
gulp.task('critical', function() {
  return gulp.src('assets/styles/critical.scss')
      .pipe(cssTasks('critical.min.css'))
      .pipe(gulp.dest(path.dist + 'styles'));
});