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.
4 answers
solution1
11 ACCPTED 2016-01-17 16:46:44
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
solution2
4 2016-01-17 17:05:02
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.
solution3
1 2016-12-18 00:16:38
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'}
solution4
0 2016-08-02 06:17:12
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 ie index.js/app.js include bootstrap css as :
import 'bootstrap/dist/css/bootstrap.css'
This configuration is only for using bootstrap css with ReactJS.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.