Réagir plusieurs chargeurs css dans webpack

Question

J'utilise les modules reac-bootstrap et css. Dans mes webpack.config.js je suis en mesure d'exécuter mon bootstrap.css avec cette config:

{ test: /\.css$/, loader: "style-loader!css-loader" } 

Cependant mes modules css devraient avoir cette configuration:

{ 
    test: /\.css$/, 
    loaders: [ 
     'style?sourceMap', 
    'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' 
    ] 
} 

Comment puis-je les faire moissonneuse-batteuse il fonctionne pour les modules CSS et réagir-bootstrap

Answer 1

Vous pouvez garder les deux chargeurs: un pour CSS global (comme bootstrap) et l'autre pour modules CSS.

Afin d'éviter les conflits entre les chargeurs avec la même test propriété, les règles d'utilisation webpack include et exclude propriétés:

{ 
    test: /\.css$/, 
    loader: "style-loader!css-loader", 
    include: [ 
    /* Paths to Bootstrap and further global CSS only */ 
    ] 
}, 
{ 
    test: /\.css$/, 
    loaders: [ 
    'style?sourceMap', 
    'css?modules&importLoaders=1&localIdentName[path]___[name]__[local]___[hash:base64:5]' 
    ], 
    include: [ 
    /* eg. Paths to your source directory */ 
    ] 
}