Webpack bootstrap.css Le module npm échoue à analyser avec ExtractTextLoader + css_loader

Question

J'apprends à utiliser node en tant qu'outil de construction frontal et j'ai du mal à inclure bootstrap dans un fichier bundle css à inclure dans une page Web.

J'ai un chargeur pour moins et un chargeur pour CSS, ainsi que des chargeurs pour POLICES, et exiger que ceux de mes propres sources semblent travailler traduire correctement CSS dans mes fichiers bundle, mais dès que je

require('bootstrap/dist/css/bootstrap.css') 

ou

require('../../node_modules/bootstrap/dist/css/bootstrap.css') 

Je reçois l'erreur suivante lors de webpack:

ERROR in ./~/bootstrap/dist/css/bootstrap.css?root=/~/bootstrap/dist/ 
Module parse failed: <my project root>/node_modules/bootstrap/dist/css/bootstrap.css?root=/node_modules/bootstrap/dist/ Unexpected token (7:5) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (7:5) 

J'ai vérifié bootstrap.css à partir du bundle, et line7, char5 semble être l'espace "" entre html et {première règle CSS dans le fichier après un commentaire de bloc qui est parfaitement valide CSS ...? Je peux même copier tout le contenu de ce fichier dans un de mes fichiers source locaux (common/style.less) et il va très bien analyser et être inclus dans le bundle. Je ne peux tout simplement pas l'inclure depuis l'emplacement node_modules. Pourquoi?

Mon point d'entrée app.js ressemble à ceci:

import 'babel-polyfill'; 

// common frameworks 
require('expose?$!jquery'); 
require('expose?jQuery!jquery'); 
require('bootstrap/dist/js/bootstrap.js'); 

// common styles 
require('bootstrap/dist/css/bootstrap.css'); 
require('./common/style.less'); 

// common images 
var images = require.context('./common/images/', true, /.*\.(png|gif|bmp|jpg|jpeg|ico)$/); 
images.keys().forEach(images); 

// modules 
require('./modules/landing'); 

webpack.config.js:

const webpack = require('webpack'); 
var path = require('path'); 
var minimize = process.argv.indexOf('--minimize') !== -1; 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

var CssBundler = new ExtractTextPlugin('[name].css', { 
    allChunks: true 
}); 

var BUILD_DIR = path.resolve(__dirname, '../webroot/assets'); 
var APP_DIR = path.resolve(__dirname, './src'); 

config = { 
    entry: { 
    'camo' : APP_DIR + '/Camo/index', 
    'frontend': APP_DIR + '/Frontend/index' 
    }, 
    output: { 
    path: BUILD_DIR, 
    publicPath: '/assets/', 
    filename: '[name].bundle.js' 
    }, 
    module: { 
    loaders: [ 
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'imports?this=>window!babel-loader' 
    }, 
    { 
     test: /\.css$/, 
     include: APP_DIR, 
     loader: CssBundler.extract("style-loader", "css-loader") 
    }, 
    { 
     test: /\.less/, 
     include: APP_DIR, 
     loader: CssBundler.extract("style-loader", "css-loader!less-loader") 
    }, 
    { 
     test: /\.(png|jpg|gif|bmp|ico)$/, 
     include: APP_DIR, 
     loader: 'url-loader?limit=8192!file?name=/images/[name].[ext]' // inline base64 URLs for <=8k images, direct URLs for the rest] 
    }, 
    { 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
     loader: 'file?name=/fonts/[name].[ext]' 
    }, 
    { 
     test: /\.handlebars$/, 
     loader: "handlebars-loader" 
    }] 
    }, 
    plugins: [ 
    CssBundler 
    ] 
}; 

if (minimize) { 
    config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: false 
     }, 
     output: { 
     comments: false 
     } 
    }) 
) 
} 

module.exports = config; 

Answer 1

J'ai finalement réglé ça. Notez mes chemins INCLUDE. pour css, il ne comprend que mon dossier/src, qui par nature exclut node_modules puisqu'il y est frère. Si je change mon include pour que css soit le répertoire racine de l'application, le chargeur approprié gère le css pour bootstrap.css et il construit correctement! ouf.