使用 Webpack 和 CSS “你可能需要一个合适的加载器来处理这种文件类型”答案

【问题标题】：“You may need an appropriate loader to handle this file type” with Webpack and CSS使用 Webpack 和 CSS “你可能需要一个合适的加载器来处理这种文件类型”
【发布时间】：2016-10-22 09:29:18
【问题描述】：

我是 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 平台上运行很重要

【问题讨论】：

我会四倍检查 CSS 和样式加载器是否在您的节点模块中，然后作为健全性检查，擦除节点模块并重新安装。
是的，我检查了四次。我创建了一个单独的项目，全新安装 node_modules，结果相同。我更进一步，启动了一个我安装了 webpack、css-loader 和 style-loader 的 linux VM。并收到同样的错误。除了 webpack、css-loader 和 style-loader 之外，node_modules 中没有任何内容。我厌倦了多个 css 文件，一切都很简单。我将 loader 下 loader 选项的格式从 style-loader!css-loader 改为 style!css。
刚新建了一个ubuntu的VM，安装了nodejs，webpack和2个loader，node_modules目录下有css_loader和style_loader的入口，还是不爽。这对我来说一定很愚蠢。

标签： css webpack webpack-style-loader css-loader

【解决方案1】：

我面临这个问题大约 10 天。所以这是我找到解决此问题的解决方案。使用create-react-app 创建了一个react 应用程序后，首先运行脚本npm run eject。

然后，转到以下链接https://webpack.js.org/loaders/，单击val-loader 并按照那里的说明进行安装，然后安装url-loader 文件。

它现在必须工作。

【讨论】：

【解决方案2】：

我遇到了你遇到的同样的问题。也许你在开发环境中（热重载），只需按 ctrl+c 杀死终端上的进程，然后重新打开开发环境（npm run dev）。

【讨论】：

【解决方案3】：

我尝试在“模块”键中指定“加载器”。但是，它对我不起作用。我认为对于 2.5.1 以上的 webpack 版本，在“模块”中添加规则效果很好。

在你的 webpack.config.js 中添加这个

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

当您将其添加为规则时，您不必单独提供 tha loaders 密钥！

【讨论】：

在 webpack 中添加这一行并运行命令 npm install --save-dev css-loader 对我有用
@JonasModie 很高兴知道:)
同时运行 npm install style-loader --save 安装样式加载器以使其工作。

【解决方案4】：

好的，

如果有人遇到此问题，这就是为我解决的问题。问题出在 webpack.config.js 中。最终工作的那个看起来像这样：

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

缺少的部分是将 loaders 键移动到 modules 键下。

【讨论】：

我遇到了完全相同的问题，错误跟踪相同，我的配置文件看起来像您的正确版本，但我仍然无法使其工作。我开始累了
我的问题只有在我删除了除上述设置之外的“排除”：“某些路径”后才通过上述方法解决。排除显然不会让 css 文件被打包。希望这可以帮助其他面临类似问题的人。
我可以确认，在删除 exclude 属性后它运行良好。非常感谢@Praym！
请注意，在 webpack 4 上，您应该将 loaders 更改为 rules。