Bootstrap 4.0 Support wp-mix

bs-04-wp-mix.md

Links:

• https://getbootstrap.com/docs/4.0/getting-started/webpack/
• https://www.npmjs.com/package/wp-mix

package.json

  "devDependencies": {
    "babel-plugin-transform-es2015-modules-strip": "^0.1.1",
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "4.0.0-beta",
    "popper.js": "^1.12.5",
    "wp-mix": "^1.0.2"
  }

src/js/bootstrap.js

(($) => {

    import("bootstrap/js/src/dropdown").then(() => {
        // $('[data-toggle="dropdown"]').dropdown();
    });

    import("bootstrap/js/src/collapse").then(() => {
        // $('[data-toggle="collapse"]').collapse();
    });

})(jQuery);

webpack.mix.js

const mix = require('wp-mix');
const min = Mix.inProduction() ? '.min' : '';

mix.sourceMaps();
mix.gzCompression();

mix.notification({
    title : 'WP Mix Compile...',
});

if (Mix.inProduction()) {
    mix.generatePot({
        package   : 'wp-mix',
        bugReport : 'https://github.com/EmranAhmed/ultimate-page-builder/issues',
        src       : '*.php',
        domain    : 'wp-mix',
        destFile  : `languages/wp-mix.pot`
    });
}

mix.autoload({
    Popper: ['popper.js', 'default'],
    // In case you imported plugins individually, you must also require them here:
    Util: "exports-loader?Util!bootstrap/js/dist/util",
}, true)

mix.js('src/js/bootstrap.js', `assets/js/bootstrap${min}.js`);
mix.sass('src/sass/style.scss', `assets/css/style${min}.css`);

src/sass/style.scss

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

/*@import "~bootstrap/scss/mixins/grid";
@import "~bootstrap/scss/mixins/buttons";
@import "~bootstrap/scss/mixins/breakpoints";
@import "~bootstrap/scss/mixins/grid-framework";*/

@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/carousel";
@import "variables-site/variables-site";
@import "mixins/mixins-master";
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
@import "normalize";
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
@import "typography/typography";
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
@import "elements/elements";
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
@import "forms/forms";
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
@import "navigation/navigation";
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
@import "modules/accessibility";
/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
@import "modules/alignments";
/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
@import "modules/clearings";
/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
@import "site/secondary/widgets";
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
@import "site/site";
/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
@import "modules/infinite-scroll";
/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
@import "media/media";

#page {
  @include make-container();
  }

#content {
  @include make-row();
  }

#primary {
  @include make-col-ready();
  @include make-col(8);
  }

#secondary {
  @include make-col-ready();
  @include make-col(4);
  }