How to load styles from NPM modules using Webpack

This is a demo of how I managed to load Bootstrap styles from node_modules in a Webpack build. In short, you just need to configure Webpack with the right loaders.

An extended discussion of how I arrived at this solution is available here.

Walkthrough

The diffs between the first three commits should guide you on how to do this. Here's a step-by-step walkthrough.

1. Check out 64bd09c

   After checking out the commit, install the dependencies and start up the dev server:

   $ npm install
   $ npm start
   

   You should now see a simple "Hello, World!" page with a white background in your browser at http://localhost:8080.

2. Check out d04469a

   Again, install the dependencies added by the new commit and start up the dev server. This time, the demo page should have a black background.

   Look at the diff between the two commits ($ git diff 64bd09c d04469a). As you can see, we have installed a few more loaders with $ npm install --save-dev and configured those for use by Webpack. Lastly, we include the styles in main.js by simply requireing them.

3. Check out 280d7d1

   Again, install the new dependencies and start up the dev server. This time, the demo page should be enhanced with some Bootstrap styles.

   The diff shows how we have yet again added some loaders, which are necessary for resolving files (fonts and such) referenced by the Bootstrap styles. Finally, we pull in the Bootstrap stylesheets by simply @importing them in our main.scss. The ~ at the beginning of the module path tells the loader to look for the module in node_modules instead of trying to resolve it as a relative path.