未找到模塊：錯誤：無法解析目錄中的「./style.css」？

我試圖運行命令npm run build，但它不工作。而我得到的錯誤如下：未找到模塊：錯誤：無法解析目錄中的「./style.css」？

> [email protected] build /Users/Prashant/Code/typescript 
> webpack 

Hash: c6dbd1eb3357da70ca81 
Version: webpack 3.2.0 
Time: 477ms 
    Asset  Size Chunks    Chunk Names 
bundle.js 2.89 kB  0 [emitted] main 
    [0] ./src/index.js 51 bytes {0} [built] 
    [1] ./src/index.css 290 bytes {0} [built] [failed] [1 error] 

ERROR in ./src/index.css 
Module build failed: Unknown word (5:1) 

    3 | // load the styles 
    4 | var content = require("!!./index.css"); 
> 5 | if(typeof content === 'string') content = [[module.id, content, '']]; 
    |^
    6 | // Prepare cssTransformation 
    7 | var transform; 
    8 | 


@ ./src/index.js 1:0-22

我的網絡包的配置文件（webpack.config.js）是：

var path = require('path'); 

module.exports = { 
    entry: './src/index.js', 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'bundle.js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.css$/, 
       use: [ 
        'css-loader', 
        'style-loader' 
       ] 
      } 
     ] 
    } 
};

我的CSS文件（index.css）是

body { 
    color:red; 
}

和我的js文件index.js低於：

require("./index.css"); 
alert('this is my alert');

我試圖運行該文件，但它不工作我檢查了所有的拼寫，也嘗試添加很多其他的CSS，但它不工作，你能幫我，我該如何解決這個問題？

來源

2017-07-22 Prashant Barve

裝載機以相反的順序應用。這意味着您首先應用style-loader，然後將其結果傳遞給css-loader。 style-loader的輸出是JavaScript，它會將樣式插入到<style>標記中，但css-loader需要CSS並且無法解析JavaScript，因爲它不是有效的CSS。

正確的規則是：

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

來源

2017-07-22 13:40:39

未找到模塊：錯誤：無法解析目錄中的「./style.css」？

回答

相關問題