我有一個組件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 類不會應用于 DOM。也沒有錯誤/問題。
我想念什么？
uj5u.com熱心網友回復：
您需要使用
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"
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/379569.html