lhahn lhahn - 1 year ago 337
Javascript Question

Cannot make bootstrap work with Webpack

I am working with a

and I am trying to include bootstrap.

I have this project structure:

── css
│   └── bootstrap.min.css
│── js
| └── bootstrap.min.js
├── dist
├── index.html
├── package.json
├── server.js
├── src
│   ├── actions.js
│   ├── App.js
│   ├── components
│   ├── constants
│   ├── index.js
│   └── reducers.js
└── webpack.config.js

This is the

<!DOCTYPE html>
<link rel="stylesheet" href="css/bootstrap.min.css">
<div id='root'></div>
<script src="/static/bundle.js"></script>

Whenever I run the server, I get an error of the type:

Cannot GET /css/bootstrap.min.css

Here is the webpack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
devtool: 'eval',
entry: [
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
test: /\.css$/,
loader: 'style!css'
resolve: {
extensions: ['', '.js', '.jsx', '.json']

Everything else works fine, the problem is just bootstrap. I tried a lot of different variations on the configurations, but I can't get it to work.

I also tried requiring it directly from javascript on

import '../css/bootstrap.min.css';

And I get this error:

ERROR in ./~/css-loader!./css/bootstrap.min.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.eot in /home/lhahn/dev/javascript/sha/css
@ ./~/css-loader!./css/bootstrap.min.css 6:3278-3330 6:3348-3400


From what I realised, webpack is trying to find a font file inside my project, when trying to import Bootstrap.min.css.

Answer Source

It seems that webpack cannot load font files. Add file-loader via npm to your project and the module loaders configuration in your webpack.config.js

    test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
    loader: 'file-loader',

Try installing bootstrap through npm, remember also jquery, its dependency

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download