0
207
ViewsWhy is Next.JS automatically removing CSS during production build?
I'm experiencing non-determinism when deploying my Next.JS site w.r.t to CSS loading.
Locally, it looks as expected, but upon deploying, the CSS rules are missing completely. I see the element has the class attached to it, but the associating styling rules are non-existing, almost like they got dropped during build-time.
https://personal-blog-mocha.vercel.app/
https://github.com/Schachte/personal-blog
Local
Remote
Next.Config.JS
const withMDX = require("@next/mdx")({
extension: /\.mdx?$/,
});
module.exports = withMDX({
pageExtensions: ["js", "jsx", "md", "mdx"],
});
Component
// 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 answers
Answer question0
The problem is in your Panel.module.css file. The semicolon at the end of the file causes the 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;
}
};
So just change to
@media only screen and (max-width: 735px) {
#blog-welcome {
width: 100%;
flex-direction: column;
margin: none;
padding-top: 0;
}
#banner {
font-size: 1.5em;
}
}
Production build css output
The reason why it doesn't give an error in the development environment is that it doesn't make it into a single package. However, when it makes a single package in the production environment, it combines the Panel.module.css and Home.module.css files. The semicolon excess breaks the code.