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

我是一个新的webpack，我已经能够得到它打包我的JavaScript，但CSS没有我。我不断收到一个：“你可能需要一个合适的加载器来处理这种文件类型”与Webpack和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平台上运行是重要的

来源

2016-06-21 rgvtim

我会检查CSS和样式加载器是否在您的节点模块中，然后作为完整性检查，擦拭节点模块并重新安装。 –

是的，我四重检查。我创建了一个单独的项目，全新安装了node_modules，结果相同。我更进一步，并启动了一个Linux VM，我已经安装了webpack，css-loader和style-loader。并收到相同的错误。除webpack，css-loader和style-loader之外，node_modules中没有任何内容。我厌倦了多个CSS文件，都非常简单。我将装载程序下的loader选项的格式从style-loader！css-loader更改为style！css。 – rgvtim

刚刚创建了一个新的ubuntu虚拟机，安装了nodejs，webpack和2个加载器，node_modules目录包含了css_loader和style_loader的条目，仍然没有什么乐趣。这一直是我的愚蠢。 – rgvtim

好吧，

这是，如果任何人碰到这个运行什么固定的对我来说。该问题出现在webpack.config.js中。终于工作的那个看起来是这样的：

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

缺少的部分是在模块键下移动装载机密钥。

来源

2016-06-23 00:44:29 rgvtim

我有完全相同的问题，具有相同的错误跟踪，我的配置文件看起来像您的正确版本，但我仍然无法使其工作。我开始厌倦 –

只有在我删除了'排除'之后，我的问题才得到解决：除了上述设置之外，还有一些“路径”。排除显然不让css文件打包。希望这可以帮助任何面临类似问题的人。 – Praym

我试着在'module'键中指定'loaders'。但是，它不适合我。我认为对于2.5.1以上的webpack版本，在'模块'中添加一个规则是完美的。

在webpack.config.js

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

添加这个当您添加它作为一个规则，你就不必键来单独提供塔装载机！

来源

2017-05-12 13:13:02 Gautam

我遇到了你遇到的同一个问题。也许你是在开发环境（热重载），只需按ctrl + c终止终端上的进程，并重新打开dev env（npm run dev）。

来源

2017-06-02 08:58:49 Ridesky

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

回答

相关问题