React.js CSS isn't applied to the DOM-CodePudding

I have a component App.js and a stylesheet App.css I'd like to load accordingly.

This is what I have:

// App.js

import React, { Component } from "react";
import { render } from "react-dom";
import './App.css';
import Header from "./Header";
import Body from "./Body";
import Footer from "./Footer";


export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className={'AppWrapper'}>
        <Header />
        <Body />
        <Footer />
      </div>
    );
  }
}

const appDiv = document.getElementById("app");
render(<App />, appDiv);

// App.css

.AppWrapper {
    width: 100%;
}

// Webpack config

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      }, {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["css-loader"],
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("development"),
      },
    }),
  ],
};

However, the css class isn't applied to the DOM when rendering the page. There are no errors/issues neither.

What do I miss?

CodePudding user response：

You need to use

package.json:

{
  "name": "70296301",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}