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-loadervia npm to your project, and save it as devDependencies.npm install file-loader --save-devAnd 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