Estoy trabajando con un webpack-dev-server y estoy tratando de incluir bootstrap.

Tengo esta estructura de proyecto:

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

Este es el 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>

Cada vez que ejecuto el server, me sale un error del tipo:

Cannot GET /css/bootstrap.min.css

Aquí es el 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']
  }
};

Todo lo demás funciona bien, el problema es sólo de bootstrap. He intentado un montón de diferentes variaciones en las configuraciones, pero no puedo conseguir que funcione.

También traté de requerir directamente desde javascript en index.js:

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

Y me sale este 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

Editar

De lo que me di cuenta, webpack está tratando de encontrar un archivo de fuente dentro de mi proyecto, al tratar de importar Bootstrap.min.css.

OriginalEl autor lhahn | 2016-01-17

4 Comentarios

  1. 11

    Parece que webpack no puede cargar los archivos de fuentes.

    1. Agregar file-loader a través de mecanismo nacional de prevención a su proyecto, y guardarlo como devDependencies.

      npm install file-loader --save-dev
    2. Y modificar el módulo de cargadores de configuración en su webpack.config.js

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

    Intente instalar bootstrap a través de mecanismo nacional de prevención, recuerde también jquery, su dependencia

    He instalado con, npm install file-loader --save-dev, pero el error persiste
    Mismo webpack de error con el mismo archivo?
    sí, he actualizado a la pregunta. También tengo cinco de estos errores, diciendo que no era posible encontrar las fuentes en mi directorio raíz.
    Es bootstrap instalado a través de mecanismo nacional de prevención?
    Trate de instalarlo a través de mecanismo nacional de prevención, recuerde también jquery, su dependencia

    OriginalEl autor Matteo Basso

  2. 4

    Este lo tengo en orden para Bootstrap para trabajar con 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'}

    y

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

    También, si usted está utilizando Bootstrap localmente, usted necesita tener fonts carpeta, que contiene Bootstrap fuentes en el mismo nivel que css carpeta. Es mejor usar npm para evitar todo este problema.

    lamentablemente ahora me sale este 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
    seguro, causar que usted necesita para instalar url cargador de npmjs.com/package/url-loader
    Para nosotros los principiantes, cuando hacer estas cosas? La fuente de carga de las líneas para webpack.config.js. La importación ?
    module.rules : webpack.js.org/concepts/#loaders

    OriginalEl autor krl

  3. 1

    comparación con @krl respuesta. esto es lo que puse en virtud de los módulos de rules en
    https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.common.js

    después de haber $ 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'}

    OriginalEl autor Dirk Hoffmann

  4. 0

    Bootstrap tiene un número de diferentes archivos/fonts/imágenes que las necesidades específicas de los cargadores. Compruebe si todos los cargadores en la siguiente lista están presentes, si no npm install como devDependencies y agregar en webpack.config.js como :

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

    Y en su principal/archivo de entrada de decir index.js/app.js incluyen bootstrap css como :

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

    Esta configuración es sólo para el uso de bootstrap css con ReactJS.

    OriginalEl autor vashishatashu

Dejar respuesta

Please enter your comment!
Please enter your name here