「你可能需要一個合適的加載器來處理這種文件類型」與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

回答

相關問題