lhahn lhahn - 4 months ago 120
Javascript Question

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.

Answer

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