"このファイルタイプを処理するには適切なローダーが必要な場合があります" WebpackとCSS

Question

私はwebpackには新しく、私はJavaScriptをパッケージ化することができましたが、CSSは私を逃してしまいました。私は得続ける：

一つの私のCSSファイルの最初の行に「あなたはこのファイルタイプを処理するために、適切なローダーが必要かもしれません」。 CSSファイルは単純です：

body { 
    color:red 
} 

webpack.config.jsは次のようになります。

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

sdocs.jsも簡単で、次のようになります。最後に

require('./sdocs.css'); 

webpackを実行した結果は次のようになります。

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 

私はトリプルチェック、cssローダーとスタイルローダーがローカルレベルでロードされています。最初はグローバルにインストールしましたが、グローバルに削除してローカルに再インストールしました。ところで、デバッグフラグは余分なことは何もなかった、私は変わったと思った出力の変更はありません。私は、Windowsプラットフォーム上で実行しています

はそれが

Answer 1

[OK]を重要である、

これは、誰もがこの全体で実行されている場合、私のためにそれを固定するものです。問題はwebpack.config.jsにありました。最終的に働いていた一つは、このように見えた：

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

モジュールキーの下ローダーキーを移動して行方不明になった作品。

Answer 2

「モジュール」キーに「ローダー」を指定しようとしました。しかし、それは私にとってはうまくいかなかった。私は2.5.1より上のwebpackのバージョンでは、 'module'にルールを追加すると完全に動作すると思います。

は、ルールとして追加するときは、別途股関節ローダーのキーを提供する必要がないでしょう

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

あなたwebpack.config.jsでこれを追加します！

Answer 3

私は同じ問題をあなたが満たしていました。たぶんあなたはdev環境（ホットリロード）で、ctrl + cを押して、ターミナルでプロセスを強制終了し、dev env（npm run dev）を再度開くことができます。