“你可能需要一个合适的加载器来处理这种文件类型”与 Webpack 和 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37934147/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
“You may need an appropriate loader to handle this file type” with Webpack and CSS
提问by rgvtim
I an new to webpack, and I have been able to get it to packup my javascript, but the CSS eludes me. I keep getting a:
我是 webpack 的新手，我已经能够用它来打包我的 javascript，但是 CSS 却让我望而却步。我不断收到：
“You may need an appropriate loader to handle this file type”
“你可能需要一个合适的加载器来处理这种文件类型”
One the first line of my css file. The CSS file is simple:
我的 css 文件的第一行。CSS 文件很简单：
body {
color:red
}
The webpack.config.js looks like this:
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 is also simple and looks like this:
sdocs.js 也很简单，看起来像这样：
require('./sdocs.css');
Finally the result of running webpack look like this:
最后运行 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
I have triple checked, css-loader and style-loader are loaded at the local level. I had them installed globally at first, but i removed them globally and reinstalled them locally. BTW, the debug flag did nothing extra, no change in output, which i thought was weird.
我已经三重检查，css-loader 和 style-loader 是在本地加载的。我一开始让它们全局安装，但我全局删除它们并在本地重新安装它们。顺便说一句，调试标志没有做任何额外的事情，输出没有变化，我认为这很奇怪。
I am running on a windows platform is that matters
我在 Windows 平台上运行很重要
回答by rgvtim
Ok,
好的，
This is what fixed it for me if anyone runs across this. The issue was in the webpack.config.js. The one the finally worked looked like this:
如果有人遇到这个问题，这就是为我解决的问题。问题出在 webpack.config.js 中。最终工作的那个看起来像这样：
module.exports = {
debug: true,
entry: [ './sdocs.js' ],
output: {
filename: './[name].bundle.js'
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
],
}
}
The piece that was missing was moving the loaders key under a modules key.
丢失的部分是将 loader 键移到模块键下。
回答by Gautam
I tried specifying 'loaders' in 'module' key. But, it didn't work for me. I think for webpack versions above 2.5.1, adding a rule in 'module' works perfectly.
我尝试在 'module' 键中指定 'loaders'。但是，它对我不起作用。我认为对于 2.5.1 以上的 webpack 版本，在“模块”中添加规则非常有效。
Add this in your webpack.config.js
在你的 webpack.config.js 中添加这个
module: {
rules:[
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }
]
}
When you add it as a rule you wouldn't have to provide tha loaders key separately!
当您将其添加为规则时，您不必单独提供 tha loader 密钥！
回答by Ridesky
I had met the same issue you meet. Maybe you were in dev environment (hot reload), just press ctrl+cto kill the process on terminal, and reopen dev env (npm run dev).
我遇到了你遇到的同样问题。也许您在开发环境中（热重载），只需按ctrl+c终止终端上的进程，然后重新打开开发环境（npm run dev）。
回答by Eilya
I was facing this problem for about 10 days. so here's the solution i found to fix this problem. After using create-react-appyou created a react app, first run the script npm run eject.
我面临这个问题大约 10 天。所以这是我找到的解决此问题的解决方案。使用create-react-app您创建的反应应用程序后，首先运行脚本npm run eject。
Then, go to the following link https://webpack.js.org/loaders/, click on the val-loaderand install it as described there, then install the url-loaderfile.
然后，转到以下链接https://webpack.js.org/loaders/，单击val-loader并按照此处所述进行安装，然后安装该url-loader文件。
It has to work now.
它现在必须工作。
