web-dev-qa-db-fra.com

"Vous aurez peut-être besoin d'un chargeur approprié pour gérer ce type de fichier" avec Webpack et CSS

Je suis un nouveau WebPack et j’ai réussi à l’emballer avec mon javascript, mais le CSS m’échappe. Je continue à recevoir un:

“Vous aurez peut-être besoin d'un chargeur approprié pour gérer ce type de fichier”

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

body {
    color:red
}

Le fichier 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 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 triple vérifié, css-loader et style-loader sont chargés au niveau local. Je les avais installés globalement au début, mais je les ai supprimés globalement et les ai réinstallés localement. BTW, le drapeau de débogage n'a rien d'extraordinaire, pas de changement de sortie, ce qui m'a semblé bizarre.

Je cours sur une plateforme Windows, c'est ce qui compte

csswebpackwebpack-style-loadercss-loader
6
rgvtim

D'accord,

C’est ce qui a réglé le problème pour moi si quelqu'un le découvre. Le problème se trouvait 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 manquante consistait à déplacer la clé du chargeur sous une clé de module.

16
rgvtim

J'ai essayé de spécifier "chargeurs" dans la clé "module". Mais ça n'a pas marché pour moi. Je pense que pour les versions de Webpack supérieures à 2.5.1, l’ajout d’une règle dans «module» fonctionne parfaitement.

Ajoutez ceci dans votre webpack.config.js

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

Lorsque vous l'ajoutez en règle générale, vous n'avez pas à fournir la clé de chargeur séparément!

5
Gautam

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

0
Ridesky