web-dev-qa-db-ja.com

「このファイルタイプを処理するには、適切なローダーが必要な場合があります」WebpackおよびCSS

私は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-loaderとstyle-loaderはローカルレベルでロードされます。最初はグローバルにインストールしていましたが、グローバルに削除してローカルに再インストールしました。ところで、デバッグフラグは余計なことも、出力の変更もしませんでした。

私はWindowsプラットフォームで実行していますが重要です

csswebpackwebpack-style-loadercss-loader
10
rgvtim

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" },
      ],
    }
}

欠けていたのは、ローダーキーをモジュールキーの下に移動することでした。

18
rgvtim

「モジュール」キーに「ローダー」を指定してみました。しかし、私にはうまくいきませんでした。 2.5.1より上のwebpackバージョンでは、 'module'にルールを追加すると完全に機能すると思います。

これをwebpack.config.jsに追加します

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

ルールとして追加する場合、ローダーキーを個別に提供する必要はありません！

5
Gautam

私はあなたが出会うのと同じ問題に出会った。たぶん、あなたは開発環境にいました（ホットリロード）、ただ押す ctrl+c 端末上のプロセスを強制終了し、dev envを再度開きます（npm run dev）。

0
Ridesky