wake-up-neo.com

"Sie benötigen möglicherweise einen geeigneten Lader, um diesen Dateityp zu verarbeiten" mit Webpack und CSS

Ich habe ein neues Webpack, und ich habe es geschafft, mein Javascript zu packen, aber das CSS entzieht sich mir. Ich bekomme immer ein:

"Möglicherweise benötigen Sie einen geeigneten Lader, um diesen Dateityp zu verarbeiten."

Eine der ersten Zeile meiner CSS-Datei. Die CSS-Datei ist einfach:

body {
    color:red
}

Die webpack.config.js sieht folgendermaßen aus:

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

sdocs.js ist auch einfach und sieht so aus:

require('./sdocs.css');

Schließlich sieht das Ergebnis des Webpacks so aus:

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

Ich habe dreifach geprüft, CSS-Loader und Style-Loader werden auf lokaler Ebene geladen. Ich hatte sie zuerst global installiert, aber ich habe sie global entfernt und lokal neu installiert. Übrigens, das Debug-Flag hat nichts extra gemacht, keine Änderung in der Ausgabe, was ich für komisch hielt.

Ich laufe auf einer Windows-Plattform, darauf kommt es an

6
rgvtim

OK,

Das ist es, was es für mich behoben hat, wenn jemand darüber stößt. Das Problem war in der webpack.config.js. Die, die am Ende gearbeitet hat, sah so aus:

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

Das Stück, das fehlte, war, den Lader-Schlüssel unter einem Modulschlüssel zu bewegen.

16
rgvtim

Ich habe versucht, 'loaders' in 'module' key anzugeben. Aber es hat für mich nicht funktioniert. Ich denke, für Webpack-Versionen über 2.5.1 funktioniert das Hinzufügen einer Regel in 'module' perfekt.

Fügen Sie dies in Ihre webpack.config.js ein

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

Wenn Sie es in der Regel hinzufügen, müssen Sie den Lader-Schlüssel nicht separat angeben.

5
Gautam

Ich hatte das gleiche Problem kennengelernt, das Sie kennengelernt haben. Vielleicht warst du in einer Entwicklungsumgebung (Hot Reload), drücke einfach ctrl+c um den Prozess auf dem Terminal abzubrechen und dev env erneut zu öffnen (npm run dev).

0
Ridesky