0
213
Vistas¿Por qué Next.JS elimina automáticamente CSS durante la compilación de producción?
Estoy experimentando no determinismo cuando implemento mi sitio Next.JS para cargar CSS.
A nivel local, se ve como se esperaba, pero al implementar, las reglas de CSS faltan por completo. Veo que el elemento tiene la clase adjunta, pero las reglas de estilo asociadas no existen, casi como si se hubieran eliminado durante el tiempo de compilación.
https://blog-personal-mocha.vercel.app/
https://github.com/Schachte/blog-personal
Local
Remoto
Siguiente.Config.JS
const withMDX = require("@next/mdx")({ extension: /\.mdx?$/, }); module.exports = withMDX({ pageExtensions: ["js", "jsx", "md", "mdx"], });Componente
// CSS import Home from "../../styles/main/Home.module.css"; const Headline = () => { return ( <div id={Home["main-banner"]}> <span>👋 I'm ___, a technologist and educator.</span> </div> ); }; export default Headline;CSS
#main-banner { width: 100%; border: 1px solid white; color: white; border-radius: 3px; align-self: center; margin-top: 40px; height: 40px; align-items: center; padding-left: 30px; padding-right: 30px; text-align: center; }1 Respuestas
Responde la pregunta0
El problema está en su archivo Panel.module.css . El punto y coma al final del archivo provoca el error.
@media only screen and (max-width: 735px) { #blog-welcome { width: 100%; flex-direction: column; margin: none; padding-top: 0; } #banner { font-size: 1.5em; } };Así que solo cambia a
@media only screen and (max-width: 735px) { #blog-welcome { width: 100%; flex-direction: column; margin: none; padding-top: 0; } #banner { font-size: 1.5em; } }Salida css de compilación de producción
La razón por la que no da error en el entorno de desarrollo es que no lo convierte en un solo paquete. Sin embargo, cuando crea un solo paquete en el entorno de producción, combina los archivos Panel.module.css y Home.module.css . El exceso de punto y coma rompe el código.