Không tìm thấy mô-đun: Lỗi: Không thể giải quyết './style.css' trong Thư mục?

Question

Tôi đang cố chạy lệnh npm run build nhưng không hoạt động. và tôi nhận được báo lỗi dưới đây:

> 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 

gói web My tập tin cấu hình (webpack.config.js) là:

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

Và file CSS của tôi (index.css) là

body { 
    color:red; 
} 

và js tập tin index.js của tôi là dưới đây:

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

Tôi đang cố gắng chạy tập tin nhưng nó không hoạt động Tôi đã kiểm tra tất cả chính tả cũng cố gắng thêm rất nhiều CSS khác nhưng nó không hoạt động, bạn có thể vui lòng giúp tôi làm thế nào tôi có thể giải quyết vấn đề này?

Answer 1

Bộ nạp được áp dụng theo thứ tự ngược lại. Điều đó có nghĩa là bạn đang áp dụng style-loader trước rồi chuyển kết quả của nó đến css-loader. Đầu ra của style-loader là JavaScript, sẽ chèn các kiểu vào một thẻ <style>, nhưng css-loader mong đợi CSS và không phân tích cú pháp JavaScript vì nó không phải là CSS hợp lệ.

Quy tắc chính xác là:

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