找不到模塊 RecipeStyle.css (cannot find module RecipeStyle.css)

問題描述

找不到模塊 RecipeStyle.css (cannot find module RecipeStyle.css)

我創建了一個 css 文件並希望它包含在一個 jsx 文件中。我安裝了 css loader 和 style‑loader 和 babel。我在腳本中導入了 css 文件，但它向我顯示了錯誤消息：找不到 moudle ./...

但是為什麼？

我看了教程並遵循了我什至的所有內容刪除節點模塊文件夾並使用 npm install 重新加載它

Recipe.jsx

import React from 'react';
import { IngredientFormPart } from './IngredientFormPart';

import './RecipeStyle.css';

export class RecipeForm extends React.Component {
    render() {
        return (
            <form>
                <label>
                    Name des Rezepts
                    <input
                        id="recipeID"
                        type="text"
                        />
                </label>
                <label>
                    <IngredientFormPart />
                </label>
            </form>
        )
    }
}

webpack.config.js

var path    = require('path');
var hwp     = require('html‑webpack‑plugin');

module.exports = {
    entry: path.join(__dirname, '/src/index.jsx'),
    output: {
        filename: 'build.js',
        path: path.join(__dirname, '/dist')
    },
    module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel‑loader'
            }
          },
          {
            test: /\.css$/,
            exclude: /node_modules/,
            use: [
              'style‑loader',
              'css‑loader'
            ]
          }
        ]
      },
      resolve: {
        extensions: [ '.js', '.jsx', 'css' ]
      },
    plugins:[
        new hwp({template:path.join(__dirname, '/src/index.html')})
    ]
}

.babel config

{
    "presets": ["@babel/preset‑react", "@babel/preset‑env"],
    "plugins": ["@babel/plugin‑transform‑react‑jsx"]
}

package.json

{
  "name": "react‑state",
  "version": "1.0.0",
  "description": "ddd ",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve ‑‑mode development ‑‑open ‑‑hot",
    "build": "webpack ‑‑mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@babel/preset‑env": "^7.12.13",
    "css‑loader": "^5.0.2",
    "react": "^17.0.1",
    "react‑dom": "^17.0.1",
    "style‑loader": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.13",
    "@babel/preset‑react": "^7.12.13",
    "babel‑loader": "^8.2.2",
    "html‑webpack‑plugin": "^5.0.0",
    "webpack": "^5.20.2",
    "webpack‑cli": "^4.5.0",
    "webpack‑dev‑server": "^3.11.2"
  }
}

參考解法

方法 1:

Try changing "css" in resolve.extensions to ".css".

(by partseven、Jordan)

參考文件

1. cannot find module RecipeStyle.css (CC BY‑SA 2.5/3.0/4.0)