"Vous pouvez avoir besoin d'un chargeur approprié pour gérer ce type de fichier" avec Webpack et CSS

Question

Je suis un nouveau client de webpack, et j'ai pu l'obtenir pour emballer mon javascript, mais le CSS m'échappe. Je continue à obtenir un:

« Vous devrez peut-être un chargeur approprié pour gérer ce type de fichier »

Une première ligne de mon fichier css. Le fichier CSS est simple:

body { 
    color:red 
} 

Les webpack.config.js ressemble à ceci:

module.exports = { 
    debug: true, 
    entry: [ './sdocs.js' ], 
    output: { 
     filename: './[name].bundle.js' 
    }, 
    loaders: [ 
     { test: /\.css$/, loader: "style-loader!css-loader" }, 
    ], 
} 

sdocs.js est aussi simple et ressemble à ceci:

require('./sdocs.css'); 

Enfin, le le résultat de l'exécution de webpack ressemble à ceci:

ERROR in ./sdocs.css 
Module parse failed: C:\Users\Tim\PhpstormProjects\xxx\sdocs.css 
Unexpected token (1:5) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (1:5) 
at Parser.pp.raise (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:923:13) 
at Parser.pp.unexpected (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1490:8) 
at Parser.pp.semicolon (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1469:73) 
at Parser.pp.parseExpressionStatement (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1994:8) 
at Parser.pp.parseStatement (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1772:188) 
at Parser.pp.parseTopLevel (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1666:21) 
at Parser.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1632:17) 
at Object.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:885:44) 
at Parser.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack\lib\Parser.js:902:15) 
at DependenciesBlock.<anonymous> (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack\lib\NormalModule.js:104:16) 
at DependenciesBlock.onModuleBuild (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) 
at nextLoader (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25) 
at C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5 
at Storage.finished (C:\Users\Tim\PhpstormProjects\xxx\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16) 
at C:\Users\Tim\PhpstormProjects\xxx\node_modules\graceful-fs\graceful-fs.js:78:16 
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3) @ ./sdocs.js 1:0-22 

J'ai triplement vérifié, css-loader et style-loader sont chargés au niveau local. Je les ai fait installer globalement au début, mais je les ai enlevés globalement et les ai réinstallés localement. BTW, le drapeau de débogage n'a rien fait de plus, aucun changement de sortie, ce que je pensais être bizarre.

Je suis en cours d'exécution sur une plate-forme Windows est ce qui importe

Answer 1

Ok,

C'est ce qu'il fixe pour moi si quelqu'un traverse cela. Le problème était dans le fichier webpack.config.js. Celui qui a finalement fonctionné ressemblait à ceci:

module.exports = { 
    debug: true, 
    entry: [ './sdocs.js' ], 
    output: { 
     filename: './[name].bundle.js' 
    }, 
    module: { 
     loaders: [ 
     { test: /\.css$/, loader: "style-loader!css-loader" }, 
     ], 
    } 
} 

La pièce qui manquait était de déplacer la clé des chargeurs sous une clé de module.

Answer 2

J'ai essayé de spécifier 'loaders' dans la clé 'module'. Mais ça n'a pas marché pour moi. Je pense que pour les versions de webpack au dessus de 2.5.1, ajouter une règle dans 'module' fonctionne parfaitement.

Ajouter dans vos webpack.config.js

module: { 
    rules:[ 
     { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } 
    ] 
} 

Lorsque vous ajoutez en règle générale vous ne devez fournir THA chargeurs clés séparément!

Answer 3

J'ai rencontré le même problème que vous rencontrez. Peut-être que vous étiez en environnement de développement (rechargement à chaud), appuyez simplement sur ctrl + c pour tuer le processus sur le terminal, et rouvrir dev env (npm run dev).