Ne peut pas faire de bootstrap travailler avec Webpack

Je travaille avec un webpack-dev-server et je suis en train d'essayer d'inclure bootstrap.

J'ai cette structure de 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 je lance le serveur, j'obtiens une erreur du type:

Cannot GET /css/bootstrap.min.css

Ici est la 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 de bootstrap. J'ai essayé beaucoup de différentes variations sur les configurations, mais je ne peux pas le faire fonctionner.

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

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

Et j'obtiens 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

De ce que j'ai compris, webpack est d'essayer de trouver un fichier de police à l'intérieur de mon projet, lorsque vous essayez d'importer des fichiers d'amorce.min.css.

OriginalL'auteur lhahn | 2016-01-17

  1. 11

    Il semble que webpack ne peut pas charger des fichiers de police.

    1. Ajouter file-loader via npm à votre projet, et de l'enregistrer comme devDependencies.

      npm install file-loader --save-dev

    2. Et modifier le module chargeurs de configuration dans votre webpack.config.js

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

    Essayez d'installer bootstrap par mnp, souvenez-vous aussi de jquery, sa dépendance

    J'ai installé avec, npm install file-loader --save-dev, mais l'erreur persiste
    Même webpack erreur avec le même fichier?
    oui, j'ai mis à jour la question. Je reçois aussi cinq de ces défauts, en disant qu'il n'était pas possible de trouver les polices sur mon répertoire racine.
    Est bootstrap installé via npm?
    Essayer de l'installer par le biais de la ngp, souvenez-vous aussi de jquery, de sa dépendance

    OriginalL'auteur Matteo Basso

  2. 4

    Ce ce que j'ai pour Bootstrap de 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';

    Aussi, si vous utilisez Bootstrap localement, vous devez avoir fonts dossier, contenant Bootstrap polices au même niveau que css dossier. Il est préférable d'utiliser npm pour éviter tous ces ennuis.

    malheureusement, maintenant j'ai cette erreur: 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
    assurez-vous, parce que vous devez installer url chargeur npmjs.com/package/url-loader
    Pour nous, les débutants, où faire ces choses se passent? Le chargement de polices lignes sont pour webpack.config.js. L'importation ?
    href="https://webpack.js.org/concepts/#loaders" >webpack.js.org/concepts/#loaders

    OriginalL'auteur krl

  3. 1

    par rapport à @krl réponse. c'est ce que j'ai mis sous des 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'}

    OriginalL'auteur Dirk Hoffmann

  4. 0

    Bootstrap a un certain nombre de différents fichiers/fonts/images que les besoins spécifiques des chargeurs. Vérifier si tous les chargeurs dans la liste suivante sont présents, si ce n'est npm install comme devDependencies et ajouter dans webpack.config.js comme : 

    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 main/entrée de fichier c'est à dire index.js/app.js inclure bootstrap css :

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

    Cette configuration est uniquement pour l'utilisation de bootstrap css avec ReactJS.

    OriginalL'auteur vashishatashu