How to load styles from NPM modules using Webpack
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
.jshintrc
README.md
package.json
webpack.config.js

README.md

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.