为什么 Next.JS 在生产构建过程中自动删除 CSS？

Question

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

\n

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

\n

https://personal-blog-mocha.vercel.app/

\n

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

\n

当地的

\n

\n

偏僻的

\n

\n

Next.Config.JS

\n

const withMDX = require("@next/mdx")({\n  extension: /\\.mdx?$/,\n});\n\nmodule.exports = withMDX({\n  pageExtensions: ["js", "jsx", "md", "mdx"],\n});\n

\n

成分

\n

\n// CSS\nimport Home from "../../styles/main/Home.module.css";\n\nconst Headline = () => {\n  return (\n    <div id={Home["main-banner"]}>\n      <span> I\xe2\x80\x99m ___, a technologist and educator.</span>\n    </div>\n  );\n};\nexport default Headline;\n

\n

CSS

\n

#main-banner {\n  width: 100%;\n  border: 1px solid white;\n  color: white;\n  border-radius: 3px;\n  align-self: center;\n  margin-top: 40px;\n  height: 40px;\n  align-items: center;\n  padding-left: 30px;\n  padding-right: 30px;\n  text-align: center;\n}\n

\n

Answer 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文件。多余的分号会破坏代码。