Using webpack to bundle CSS

Question

I have a few NPM mudules I'm trying to bundle with webpack so I don't have to use CDN.

I was able to figure out how to get the .js files working but I don't understand how to get the .css files for the same modules.

For example I have Bootstrap has a NPM module. In my entry.js file I have require('bootstrap'); but that only gives me the javascript files.

I've seen other npm modules like bootstrap-webpack etc but I don't understand why I need to download another module if I already have bootstrap part of my node_modules . Same with things like 'font-awesome', 'animate.css', 'select2'

What am I missing?

Answer 1

As I know the Bootstrap supports the commonJS module loader. So you can load the bootstrap js files using require().

When you use require('bootstrap'), a bootstrap's entry file is loaded then the entry file load some another file part of library. (Actually the bootstrap entry file only load one file /dist/js/bootstrap.js ) [check official] repo( https://github.com/twbs/bootstrap/tree/master/dist/js )).

In this process, if the bootstrap use require('some.css') to load css, webpack try load css. But require('some.css') is not generalised method. Without webpack or browserify or other build system, css can not loaded by require(). that's why you must need bootstrap-webpack .

Additionally, the bootstrap can used not only in webpack but also common environment like a in requirejs(AMD) or by <script> tag. So you have to load css manually or by means of bootstrap-webpack .