2017-08-09 4 views
2

J'ai un problème très étrange où tous les nouveaux fichiers CSS que je crée et import dans mon code JS ne sont pas ajoutés au fichier de sortie. Ma configuration webpack est configurée pour regrouper tous les fichiers CSS requis dans mes composants React dans un fichier de sortie appelé styles.css. Voici les parties pertinentes de ma config:Modules Webpack CSS ne pas chargement de nouveau code

module.exports = { 
    ... 
    module: { 
    rules: [ 
     ... 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: ['css-loader?modules=true&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'], 
     }) 
     }, 
     ... 
    ], 
    }, 
    ... 
    plugins: [ 
    ... 
    new ExtractTextPlugin('css/styles.css'), 
    ... 
    ], 
}; 

Cette configuration crée un fichier appelé styles.css et le met dans un répertoire appelé css dans mon répertoire de sortie. Voici la partie étrange: Elle génère actuellement les noms de classes hachées pour tous les fichiers importés dans mon code, mais elle ignore les définitions de classe de certains fichiers (de manière cohérente).

J'utilisait ces versions des paquets:

"css-loader": "^0.28.4", 
"postcss-loader": "^2.0.6", 
"style-loader": "^0.18.2", 
"webpack": "^2.6.1", 

J'ai même essayé de mettre à jour tous les paquets, mais le problème a persisté.

J'ai essayé d'exécuter webpack sur trois machines différentes, à la fois en mode de production et de développement, et j'obtiens toujours les mêmes résultats.

Des idées? Est-ce que je manque quelque chose ici?

Répondre

0

J'ai effectivement trouvé une réponse: j'utilisais des morceaux comme points d'entrée séparés dans mon webpack, mais je réécrivais (de manière négligente) le même fichier CSS sans tenir compte des différents besoins des différents points d'entrée. Jusqu'à présent, j'avais la plupart du temps les mêmes règles CSS pour tous mes morceaux d'entrée, ce qui explique pourquoi je ne l'avais pas vu auparavant.

D'oh!