Nie znaleziono modułu: Błąd: nie można rozwiązać "./style.css" w katalogu?

Question

Próbuję uruchomić polecenie npm run build, ale nie działa. a ja otrzymuję błąd poniżej:

> typescript@1.0.0 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 

Moja paczka internetowej plik konfiguracyjny (webpack.config.js) wynosi:

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' 
       ] 
      } 
     ] 
    } 
}; 

A mój plik CSS (index.css) jest

body { 
    color:red; 
} 

i moje js index.js plik jest poniżej:

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

Próbuję uruchomić plik, ale to nie działa Sprawdziłem całą pisownię i próbuję dodać wiele innych CSS, ale to nie działa, czy możesz mi pomóc, jak mogę rozwiązać ten problem?

Answer 1

Ładowarki ładuje się w odwrotnej kolejności. Oznacza to, że najpierw aplikujesz style-loader, a następnie przekazujesz jego wynik do css-loader. Wyjście style-loader to JavaScript, który wstawi style do tagu <style>, ale css-loader oczekuje CSS i nie parsuje JavaScript, ponieważ jest nieprawidłowy CSS.

Prawidłową zasadą jest:

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