Cannot make bootstrap work with Webpack

Question

I am working with a webpack-dev-server 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 index.html:

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

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: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  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 index.js:

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

Edit

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

score 13 · Accepted Answer · edited Jul 31 '17 at 07:11

13

It seems that webpack cannot load font files.

Add file-loader via npm to your project, and save it as devDependencies.
```
npm install file-loader --save-dev
```

And modify 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

edited Jul 31 '17 at 07:11

Adi Prasetyo

1,006
1
15
41

answered Jan 17 '16 at 16:46

Matteo Basso

2,694
2
14
21

I installed with, `npm install file-loader --save-dev`, but the error still persists – lhahn Jan 17 '16 at 16:53
yes, I updated the question. I also get five of this errors, saying that it was not possible to find the fonts on my root directory. – lhahn Jan 17 '16 at 17:03
Is bootstrap installed via npm? – Matteo Basso Jan 17 '16 at 17:09
1

Try installing it through npm, remember also jquery, its dependency – Matteo Basso Jan 17 '16 at 17:52
Which one worked exactly? Can you upload the entire code somewhere? – papaiatis Feb 13 '17 at 20:08
This was helpful, but created a bunch of junk files. I recommend using `{ test: [/\.woff?$/, /\.woff2?$/, /\.ttf?$/, /\.eot?$/, /\.svg?$/], loader: 'url-loader' }` – Wylliam Judd Apr 09 '17 at 16:55

krl · Answer 2 · 2016-01-17T17:10:39.300

4

This what I have in order for Bootstrap to work with Webpack:

{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}

and

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

Also, if you are using Bootstrap locally, you need to have fonts folder, containing Bootstrap fonts at the same level as css folder. It's best to use npm to avoid all this trouble.

edited Jan 17 '16 at 17:10

answered Jan 17 '16 at 17:05

krl

5,087
4
36
53

sadly now I get this error: `ERROR in ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css Module not found: Error: Cannot resolve module 'url' in /home/lhahn/dev/javascript/sha/node_modules/bootstrap/dist/css @ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 6:4622-4676 ` – lhahn Jan 17 '16 at 18:16
1

sure, cause you need to install url loader https://www.npmjs.com/package/url-loader – krl Jan 17 '16 at 18:29
For us beginners, *where* do these things go? The font loading lines are for webpack.config.js. The import ? – bbsimonbb Apr 03 '17 at 08:28

score 1 · Answer 3 · answered Dec 18 '16 at 00:16

compared to @krl answer. this is what I put under modules rules in https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.common.js

after having $ npm install style-loader css-loader url-loader --save-dev

{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader'},
{test: /\.(woff|woff2)$/, use: 'url-loader?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml'}

score 0 · Answer 4 · answered Aug 02 '16 at 06:17

Bootstrap has a number of different files/fonts/images that needs specific loaders. Check if all loaders in following list are present, if not npm install them as devDependencies and add in webpack.config.js as :

loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.html$/,
                loader: "html"
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            }, {
                test: /\.txt$/,
                loader: 'raw-loader'
            }, {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
                loader: 'url-loader?limit=10000'
            }, {
                test: /\.(eot|ttf|wav|mp3)$/,
                loader: 'file-loader'
            }
        ]

And in your main/entry file i.e. index.js/app.js include bootstrap css as :

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

This configuration is only for using bootstrap css with ReactJS.

Cannot make bootstrap work with Webpack

Edit

4 Answers4