React.js CSS isn't applied to the DOM

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?

Solution

You need to use style-loader to inject CSS into DOM via style tag.

Besides, you also need to use @babel/preset-react presets to transform React JSX syntax.

Use html-webpack-plugin plugin to simplify creation of HTML files to serve your webpack bundles.

A working example:

webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./src/index.html"),
    }),
  ],
};

src/index.js:

import React, { Component } from "react";
import { render } from "react-dom";
import "./index.css";

export default class App extends Component {
  render() {
    return <div className="AppWrapper">app</div>;
  }
}

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

src/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <main id='app'></main>
</body>

</html>

index.css:

.AppWrapper {
  background-color: red;
}

After compilation, access the page:

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"
  }
}