webentwicklung-frage-antwort-db.com.de

Bootstrap kann nicht mit Webpack verwendet werden

Ich arbeite mit einem webpack-dev-server und versuche, Bootstrap einzuschließen.

Ich habe diese Projektstruktur:

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

Dies ist der 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>

Immer wenn ich den Server betreibe, erhalte ich einen Fehler des Typs:

Cannot GET /css/bootstrap.min.css

Hier ist die 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']
  }
};

Alles andere funktioniert gut, das Problem ist nur Bootstrap. Ich habe viele verschiedene Variationen der Konfigurationen ausprobiert, aber ich kann es nicht zum Laufen bringen.

Ich habe auch versucht, es direkt von Javascript auf index.js zu fordern:

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

Und ich bekomme diesen Fehler:

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

Bearbeiten

Nach meiner Erkenntnis versucht webpack beim Importieren von Bootstrap.min.css, eine Schriftartdatei in meinem Projekt zu finden.

7
lhahn

Es scheint, dass Webpack keine Schriftdateien laden kann.

  1. Fügen Sie file-loader über npm zu Ihrem Projekt hinzu und speichern Sie es als devDependencies.

    npm install file-loader --save-dev
    
  2. Und ändern Sie die Konfiguration der Modullader in Ihrer webpack.config.js

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

Installieren Sie bootstrap über npm . Denken Sie auch an jquery, seine Abhängigkeit

11
Matteo Basso

Das, was ich habe, damit Bootstrap mit Webpack zusammenarbeitet:

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

und 

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

Wenn Sie Bootstrap lokal verwenden, müssen Sie über den Ordner fonts verfügen, der Bootstrap-Schriftarten auf derselben Ebene wie der Ordner css enthält. Am besten verwenden Sie npm, um all diese Probleme zu vermeiden.

4
krl

im Vergleich zu @ Krl Antwort. Dies ist, was ich unter rules in https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.common.js

nach $ 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 verfügt über eine Reihe verschiedener Dateien/Schriftarten/Bilder, für die bestimmte Lader erforderlich sind. Überprüfen Sie, ob alle Loader in der folgenden Liste vorhanden sind. Wenn dies nicht der Fall ist, installieren Sie sie als devDependencies und fügen Sie die Datei webpack.config.js wie folgt hinzu: 

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

Und in Ihrer Haupt-/Eintragsdatei, d. H. Index.js/app.js, enthalten bootstrap css als:

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

Diese Konfiguration ist nur für die Verwendung von Bootstrap-css mit ReactJS vorgesehen. 

0
vashishatashu