React.js CSS 未应用于 DOM

Question

我有一个组件 App.js 和一个样式表 App.css 我想相应地加载。

这是我的：

// 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"),
      },
    }),
  ],
};

但是，在呈现页面时 css class 不会应用于 DOM。也没有errors/issues。

我错过了什么？

Answer 1

您需要使用 style-loader 通过 style 标签将 CSS 注入 DOM。

除此之外，你还需要使用@babel/preset-react个预设来改造React JSX语法

使用 html-webpack-plugin 插件来简化 HTML 文件的创建来为您的 webpack 包提供服务。

一个工作示例：

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

编译后访问页面：

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

React.js CSS 未应用于 DOM

React.js CSS isn't applied to the DOM

dom

reactjs

webpack

css-loader