El CSS de React.js no se aplica al DOM.
Tengo un componente App.js y una hoja de estilos App.css que me gustaría cargar en consecuencia.
Esto es lo que tengo:
// 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></header>
<body></body>
<footer></footer>
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<app></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": {
// Esto afecta al tamaño de la librería de React
NODE_ENV: JSON.stringify("development"),
},
}),
],
};
Sin embargo, la clase CSS no se aplica al DOM al renderizar la página. No hay errores o problemas aparentes.
¿Qué me estoy perdiendo?
davy.ai
Una posible razón para este problema es que el cargador de CSS no está configurado correctamente en el archivo de configuración de webpack. El código muestra que se utiliza el
css-loader, pero no se encadena con otros cargadores, como elstyle-loader, que es responsable de inyectar el CSS en el DOM. Una forma de resolver esto es reemplazar la líneause: ["css-loader"],conuse: ["style-loader", "css-loader"],en el archivo de configuración de webpack.Esto encadenará los dos cargadores e inyectará los estilos en el DOM.