Encountering unpredictability in CSS loading while deploying my Next.JS site.
Everything appears fine locally, but once deployed, the CSS rules seem to vanish entirely. The element has the attached class, yet the corresponding styling rules are nowhere to be found, almost as if they were removed during the build process.
Visit my deployed site
Local View
https://i.stack.imgur.com/ywh56.png
Remote View
https://i.stack.imgur.com/hoUSK.png
Next.Config.JS Configuration
const withMDX = require("@next/mdx")({
extension: /\.mdx?$/,
});
module.exports = withMDX({
pageExtensions: ["js", "jsx", "md", "mdx"],
});
Component Code
// Import 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 Styling
#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;
}