CODEWITHSUNDEEP
javascripttwitter-bootstrapwebpackwebpack-dev-serverwebpack-style-loader
lhahn
lhahn

Reputation: 1241

Cannot make bootstrap work with Webpack

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.

Upvotes: 9

Views: 18017

Answers (4)

Matteo Basso
Matteo Basso

Reputation: 2704

It seems that webpack cannot load font files.

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

    npm install file-loader --save-dev

  2. 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

Upvotes: 13

Dirk Hoffmann
Dirk Hoffmann

Reputation: 1563

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'}

Upvotes: 1

vashishatashu
vashishatashu

Reputation: 8142

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.

Upvotes: 0

krl
krl

Reputation: 5296

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.

Upvotes: 4

Related Questions