Cannot make bootstrap work with Webpack
Solution 1
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
Solution 2
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.
Solution 3
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'}
Comments
-
lhahn almost 2 years
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.
-
lhahn over 8 yearsI installed with,
npm install file-loader --save-dev
, but the error still persists -
lhahn over 8 yearsyes, 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.
-
Matteo Basso over 8 yearsIs bootstrap installed via npm?
-
Matteo Basso over 8 yearsTry installing it through npm, remember also jquery, its dependency
-
lhahn over 8 yearssadly 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
-
krl over 8 yearssure, cause you need to install url loader npmjs.com/package/url-loader
-
papaiatis about 7 yearsWhich one worked exactly? Can you upload the entire code somewhere?
-
bbsimonbb about 7 yearsFor us beginners, where do these things go? The font loading lines are for webpack.config.js. The import ?
-
Wylliam Judd about 7 yearsThis was helpful, but created a bunch of junk files. I recommend using
{ test: [/\.woff?$/, /\.woff2?$/, /\.ttf?$/, /\.eot?$/, /\.svg?$/], loader: 'url-loader' }