Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
este-bootstrap

Bootstrap integration

There are - like always with computer science - multiple ways to integrate Bootstrap in your project.

The easiest one probably being by referencing both needed resources:

<link rel="stylesheet"
      href="//your.favourite.cdn/bootstrap.css"
      integrity="sha384-XXXXXXXX"
      crossorigin="anonymous">
<script src="//your.favourite.cdn/bootstrap.js"
		integrity="sha384-XXXXXXXX"
        crossorigin="anonymous">< /script>

Done. You get Bootstrap in its full glory with the benefits that serving resources via a CDN can offer.

However, this is not always what you're looking for.

In this guide, we will look at how to integrate (and customise) Bootstrap in Este's Webpack bundle.

Installation

The job is handed off to bootstrap-loader. The required steps are excerpted from the readme file. To sum it up here:

npm install bootstrap-loader resolve-url-loader --save

# Either Bootstrap 3...
npm install bootstrap-sass --save

# or Bootstrap 4
npm install twbs/bootstrap#v4.0.0-alpha.2 --save

# Other loaders are already configured in our Este's project, w00t!

Configuration

Now we need to tell Webpack to include bootstrap-loader in the build process. Edit webpack/makeConfig.js:

Note how we do it before browser/main.js

  const config = {
    ...
    entry: {
      app: isDevelopment ? [
        `webpack-hot-middleware/client?path=http://${serverIp}:${constants.HOT_RELOAD_PORT}/__webpack_hmr`,
        'bootstrap-loader',
        path.join(constants.SRC_DIR, 'browser/main.js')
      ] : [
        'bootstrap-loader',
        path.join(constants.SRC_DIR, 'browser/main.js')
      ]
    },
    ...
 }

Further configuration is optional if you will stay with version 3 of Bootstrap. However, it is recommended (and required for Bootstrap 4) by the bootstrap loader package authors.

Create a .bootstraprc file at the root directory. The file can be written in YAML or JSON format. Feel free to modify it as you need.

All file options are described here.

You will probably need to remove the npm package normalize.css and the line importing it in browser/app/App.styl if you keep normalize to true in .bootstraprc.

Depending on what configuration you set, you may need to include jQuery.

Reference Bootstrap files

If you need to make use of Bootstrap own files (like variables or mixins), simply import the resources from your own SCSS file.

Pay attention to the leading tilde (~) which allow us to resolve files from our beloved node_modules directory.

@import "~bootstrap/scss/_mixins.scss";
@import "~bootstrap/scss/_variables.scss";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment