為什么 Next.JS 在生產構建期間會自動刪除 CSS？

Question

將我的 Next.JS 站點 w.r.t 部署到 CSS 加載時，我遇到了不確定性。

在本地，它看起來符合預期，但在部署時，CSS 規則完全缺失。 我看到該元素附加了class，但關聯的樣式規則不存在，幾乎就像它們在構建時被丟棄一樣。

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

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

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 output

之所以在開發環境中沒有報錯，是因為沒有把它做成一個單獨的package。 但是，它在生產環境中制作單個 package 時，會合並 Panel.module.css和Home.module.css文件。 多余的分號會破壞代碼。