Bootstrap: Bootstrap 4 with npm and webpack

[IdanCo]

I've been spending WAY too much time on adding bootstrap 4 with npm to a webpack project. In hope to save others the time, I thought i'll share the final recipe -

start by installing bootstrap in your project -

npm install [email protected] --save

(notice bootstrap has two dependencies - jquery and tether. If you would rather have explicit versions of those two, you should install them as well)

import bootstrap's javascript through index.js -

import 'bootstrap';

(i'm assuming you're using es6, in case of es5, use require('bootstrap'))

The previous line will only import the js part of bootstrap. for the styling part you have two options -

1. Precompiled SASS

Inside one of your sass files (index.scss for example) add this line -

@import "~bootstrap/scss/bootstrap.scss";

(notice the ~ (tilde) which points to the node modules folder)
This mehtod is beneficial if you plan on using your own version of the wonderful __variables_ file bootstrap comes with. just make sure you import __variables_ before _bootstrap_. Also, now you can use all the cool mixins bootstrap has.

2. Compiled CSS only

If you're not planning on using the variables or the mixins, and prefer the precooked css file, simply add this line to index.js or any other js file -

import 'bootstrap/dist/css/bootstrap.css';

(btw - you can also import this way the sass file, but it's nicer to import it via another sass file as shown in pervious mehtod)

now comes the webpack part. for _jquery_ and _tether_ to be available as a global variable throughout the project, you'll have to add this to your webpack plugins sections -

new webpack.ProvidePlugin({ // inject ES5 modules as global vars
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Tether: 'tether'
})

The different jquery definition are meant to answer requirements of different libraries (for example angular looks for 'window.jQuery'). I'm assuming your webpack.config already has rules for scss and/or css.

And that's it! now you have bootstrap in your webpack project.
Let me know if any further explanation is needed, and if anyone knows of a better way, please share.

[cr101]

@import "~bootstrap/scss/bootstrap.scss";
(notice the ~ (tilde) which points to the node modules folder)

@IdanCo Do you need to install a dependency to be able to use ~ instead of the node_modules folder?
I tried it but it didn't work.

[IdanCo]

@Olivia101 good question. I took this convention from sass-loader, but if in addition to sass-loader you're also using postcss than this could be related -
https://github.com/postcss/postcss-import/issues/209

Anyway you can try without the tilde, or worst case use '../../node_modules'.

let me know how it goes.

[mselerin]

Really nice explanations @IdanCo :+1:

I'm also using Bootstrap w/ Webpack but I have a slightly different configuration regarding the "Jquery & Tether" part.

Instead of using this :

new webpack.ProvidePlugin({ // inject ES5 modules as global vars
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Tether: 'tether'
})

which does not inject $ as a global variable but 'auto-require' it when encountered in a dependency, I use the "expose-loader" (which, actually, expose global variables ;-) ).

You could use it directly in the webpack config but, personnaly, I prefer using it in my entry file like this :

require('expose-loader?$!expose-loader?jQuery!jquery');
require("expose-loader?Tether!tether");

(yeah, the syntax looks like some sort of incantations or something ;-))

But if you prefer the webpack config way, it looks like this :

module: {
  rules: [
    {
      test: require.resolve('jquery'),
      use: [
        { loader: 'expose-loader', options: 'jQuery' },
        { loader: 'expose-loader', options: '$' }
      ]
    },

    {
      test: require.resolve('tether'),
      use: [
        { loader: 'expose-loader', options: 'Tether' }
      ]
    }
  ]
}

My 2 cents...

[Mioleris]

O u can use bootstrap-loader https://github.com/shakacode/bootstrap-loader

[mdo]

Is there something here we need to update in our docs or JS?

[IdanCo]

@mdo I think a webpack configuration is something that many developers might find useful. I'll wrap it as a PR and leave it for you to decide.

[IdanCo]

thanks for reporting @bbottema , a few questions to better diagnose the issue -

1. when importing scss, you do it directly from the js or from a secondary scss file?
2. If you use a secondary scss file, do rules before/after the import are working in the browser?
3. what version of style-loader are you using?

[IdanCo]

Smells to me like could be related to this issue, try a couple of things for me -

1. use a secondary scss, and add this code before importing bootstrap -

$navbar-inverse-color: #FFF;
$navbar-light-color: #FFF; 

1. upgrade style-loader to 0.17.0
2. take a look at a demo project implementing bootstrap

[bbottema]

@IdanCo Sorry, nevermind. I made a mess out of it :D. My config was not in order,

[bparanj]

@Mioleris bootstrap-loader currently does not support Bootstrap 4.

[mdo]

Closing since #22423 was merged.

[petrpacas]

For consideration:
https://github.com/twbs/bootstrap/pull/22423#issuecomment-315081413

[ajthinking]

This thread helped me. But dont forget to install dependencies. Im surprised this is not mentioned more explicit in https://getbootstrap.com/ npm installation section.

npm install --save jquery popper.js
npm install [email protected] --save

[Johann-S]

@ajthinking it's written here : https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript

Bootstrap is dependent on jQuery and Popper, these are defined as peerDependencies, this means that you will have to make sure to add both of them to your package.json using npm install --save jquery popper.js.

[ajthinking]

@Johann-S yes that page is great! But on https://getbootstrap.com no dependencies are mentioned in the npm section thats what caught me.

[petrpacas]

Feel free to check out https://github.com/petrpacas/webpack-bootstrap-4-setup to see how I tackled this...

[cebartling]

I would stay far away from bootstrap-loader. We are using it on a React project and it's been a pain in the butt to update to Bootstrap 4.0 beta. I ultimately want to go to Bootstrap 4 GA and I think I'm going to have to ditch bootstrap-loader to do it.

[Alex1sz]

^^ +1 on the staying away from bootstrap-loader you will regret using it I had to rip it out after it randomly broke compilation due to buggy path resolve & bootstrap version code. After forking bootstrap-loader in an attempt to fix their code I quickly realized my mistake in adding it in the first place.

[mdo]

Seeing all the follow-up comments, do we need more docs updates here?

[connelhooley]

I'm very new to webpack, but I have just set up a project and I have TypeScript and SCSS compiling correctly. I asm using webpack version 4.1.1. When I import bootstrap like this:

import 'bootstrap';

The TypeScript compiles, but I am given the following error on page load:

main.ts:3 Uncaught Error: Cannot find module "bootstrap"
    at webpackMissingModule (main.ts:3)
    at Object../ts/main.ts (main.ts:3)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:68
    at bootstrap:68

I have the following packages installed in my package.config:

  "@fortawesome/fontawesome-free-webfonts": "^1.0.4",
  "@types/bootstrap": "^4.0.1",
  "@types/jquery": "^3.3.1",
  "bootstrap": "^4.0.0",
  "jquery": "^3.3.1",
  "popper.js": "^1.14.1"

This is the typescript code:

import "../scss/main.scss";
import * as $ from "jquery";
import 'bootstrap';

$(() => {
    $('[data-toggle="tooltip"]').tooltip();
    alert(sayHello("TypeScript"));
});

I imagine I also have to declare the $ sign globally somewhere but this isn't documented in the bootstrap docs, but for me I can't seem to import the bootstrap js at all.

Is there something missing from the docs that I need to do?

[connelhooley]

Update: I fixed my issue by using:
import "bootstrap/dist/js/bootstrap.js

Apart from that the docs were enough for me to get going personally.

[petrpacas]

Well, I’m not a Webpack guru myself, and I’m glad you sorted it out, but just gonna mention that my setup is importing the individual bootstrap.js pieces (so that you can select only the necessary ones), and you are importing the whole package. Which might ofc be fine for you…

Just sayin’

Take care,
Petr

On 21. 3. 2018 16:58 +0000, Connel Hooley [e-mail], wrote:

Update: I fixed my issue by using:
import "bootstrap/dist/js/bootstrap.js
Apart from that the docs were enough for me to get going personally.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[marcosleonel]

Well done, @IdanCo ! It worked nicely for me. Thanks!

[Ruud-cb]

So many different solutions, so many different workable options, yet none of them helped me in the past 3 hours getting bootstrap up and running... The webpack documentation page looks so simple but it is not that simple, apparently. Please include some more documentation on how to test if it is working and if there are any differences when using typescript. I just installed, included, imported and my app just runs fine, no errors, but yet no col-md or container styling working.. meh, i'll just return to CDN's...

[Johann-S]

Feel free @Ruud-cb to improve our docs if you found something, we cannot covered every use case

[Johann-S]

I lock this issue everything is here: https://getbootstrap.com/docs/4.0/getting-started/webpack/

If someone want to improve our docs feel free to do it, or you can open an issue which point what is missing in our docs