web-dev-qa-db-fra.com

Impossible de faire fonctionner bootstrap avec Webpack

Je travaille avec un webpack-dev-server et j'essaie d'inclure le bootstrap.

J'ai la structure de ce projet:

── 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

C'est le 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>

Chaque fois que j'exécute le serveur, j'obtiens une erreur du type:

Cannot GET /css/bootstrap.min.css

Voici le 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']
  }
};

Tout le reste fonctionne bien, le problème est juste bootstrap. J'ai essayé beaucoup de variations différentes sur les configurations, mais je ne peux pas le faire fonctionner.

J'ai aussi essayé de l'exiger directement à partir de javascript sur index.js:

import '../css/bootstrap.min.css';

Et je reçois cette erreur:

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

Modifier

D'après ce que j'ai compris, Webpack tente de trouver un fichier de polices dans mon projet lors de l'importation de Bootstrap.min.css.

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

Il semble que Webpack ne puisse pas charger les fichiers de polices.

  1. Ajoutez file-loader via npm à votre projet et enregistrez-le sous devDependencies.

    npm install file-loader --save-dev

  2. Et modifiez la configuration des chargeurs de modules dans votre webpack.config.js

    {
  test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
  loader: 'file-loader',
}

Essayez d’installer bootstrap avec npm , n'oubliez pas également jquery, sa dépendance

11
Matteo Basso

Voici ce que j'ai pour que Bootstrap puisse travailler avec 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'}

et 

import 'bootstrap/dist/css/bootstrap.css';

De même, si vous utilisez Bootstrap localement, vous devez disposer du dossier fonts, contenant les polices Bootstrap au même niveau que le dossier css. Il vaut mieux utiliser npm pour éviter tous ces problèmes.

4
krl

par rapport à @krl réponse. C’est ce que j’ai mis sous les modules rules dans https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.common.js

après avoir $ 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'}
1
Dirk Hoffmann

Bootstrap a un certain nombre de fichiers/polices/images différents qui nécessitent des chargeurs spécifiques. Vérifiez si tous les chargeurs de la liste suivante sont présents, sinon npm les installe en tant que devDependencies et ajoutez-les dans webpack.config.js en tant que: 

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

Et dans votre fichier principal/entry, c.-à-d. Index.js/app.js inclut Bootstrap css comme:

import 'bootstrap/dist/css/bootstrap.css'

Cette configuration est uniquement destinée à l'utilisation de bootstrap css avec ReactJS. 

0
vashishatashu