Why is Next.JS automatically removing CSS during production build?

Question

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;
}

It's still broken. I just tried pushing a fix, but here is the broken site still: personal-blog-mocha.vercel.app — Ryan
– Ryan, Commented Jan 4, 2022 at 15:37

mmaismma · Accepted Answer · 2025-05-05 11:56:42Z

7

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.

edited May 5 at 11:56

mmaismma

7836 silver badges20 bronze badges

answered Jan 4, 2022 at 15:50

Muhammet Can TONBUL

3,5585 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Over a year ago

Wow, thanks! Let me give that a shot! I would not have found that!

Collectives™ on Stack Overflow

Why is Next.JS automatically removing CSS during production build?

Local

Remote

Next.Config.JS

Component

CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Local

Remote

Next.Config.JS

Component

CSS

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related