【问题标题】：Why is Next.JS automatically removing CSS during production build?为什么 Next.JS 在生产构建期间会自动删除 CSS？
【发布时间】：2022-01-04 15:25:41
【问题描述】：

在将我的 Next.JS 站点 w.r.t 部署到 CSS 加载时，我遇到了不确定性。

在本地，它看起来像预期的那样，但在部署时，CSS 规则完全缺失。我看到元素有附加到它的类，但是关联的样式规则不存在，几乎就像它们在构建时被删除一样。

https://github.com/Schachte/personal-blog

本地

远程

Next.Config.JS

const withMDX = require("@next/mdx")({
  extension: /\.mdx?$/,
});

module.exports = withMDX({
  pageExtensions: ["js", "jsx", "md", "mdx"],
});

组件


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

【问题讨论】：

它在工作你确定不工作吗？
还是坏了。我刚刚尝试推动修复，但这里仍然是损坏的网站：personal-blog-mocha.vercel.app

标签： javascript css reactjs webpack next.js

【解决方案1】：

问题出在您的 Panel.module.css 文件中。文件末尾的分号导致错误。

@media only screen and (max-width: 735px) {
    #blog-welcome {
        width: 100%;
        flex-direction: column;
        margin: none;
        padding-top: 0;
    }

    #banner {
        font-size: 1.5em;
    }
};

所以改成

@media only screen and (max-width: 735px) {
    #blog-welcome {
        width: 100%;
        flex-direction: column;
        margin: none;
        padding-top: 0;
    }

    #banner {
        font-size: 1.5em;
    }
}

生产构建 css 输出

它在开发环境中没有报错的原因是它没有把它做成一个单独的包。但是，当它在生产环境中制作单个包时，它会结合 Panel.module.css 和 Home.module.css 文件。多余的分号会破坏代码。

【讨论】：

哇，谢谢！让我试一试！我不会发现的！