How to load styles from NPM modules using Webpack
An extended discussion of how I arrived at this solution is available here.
The diffs between the first three commits should guide you on how to do this. Here's a step-by-step walkthrough.
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
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-devand configured those for use by Webpack. Lastly, we include the styles in
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
~at the beginning of the module path tells the loader to look for the module in
node_modulesinstead of trying to resolve it as a relative path.