Split Bower Package Overrides Amongst Files

sage
#1

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.

#2

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 ?

#3

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'));
});