Webpack2: how to import Bootstrap CSS for a bootstrap reaction to find its styles?

Question

I use webpack 2 and action-bootstrap in my project; I cannot find how to use CSS styles correctly for bootable CSS file. It seems that the .css file is not loaded, no matter which import statement I tried to use.

As far as I understand, I do not need the full bootstrap package with javascript, etc., since I use action-bootstrap; I just need CSS. So I added this to my main.js file:

 import 'bootstrap/dist/css/bootstrap.css'; 

It seems to work (no error message), but the styles don't apply ...

I configured the css loader in my webpack configuration file as described in the webpack 2 documentation.

Any help would be appreciated :)

Answer 1

When configuring modules: true in css-loader CSS is locally restricted by default, but you need them to be available around the world. The easiest solution is to completely remove modules: true . You could use modules in your own CSS files using : local .

But if you want to use modules, there are some workarounds to import global variables.

Definition of individual rules

Instead of including modules for all CSS files, you can create two different rules that match the desired files. So, let all CSS import from node_modules should be considered as regular (global) CSS. The rules will look like this:

 { // For all .css files except from node_modules test: /\.css$/, exclude: /node_modules/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true } } ] }, { // For all .css files in node_modules test: /\.css$/, include: /node_modules/, use: ['style-loader', 'css-loader'] } 

Of course, you can be more specific in that you want to include / exclude if you do not need all node_modules .

Specifying inline loaders

You can specify the loaders in import , and webpack will use them on top of the configured ones. You import bootstrap as follows:

 import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css'; 

This is just a quick workaround without having to change any configuration, but it is probably undesirable, especially if there are several such cases.