Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

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.

About

How to load styles from NPM modules using Webpack

Resources

Releases

No releases published

Packages

No packages published