在將我的 Next.JS 站點 wrt 部署到 CSS 加載時，我遇到了不確定性。
在本地，它看起來像預期的那樣，但在部署時，CSS 規則完全丟失。我看到這個元件具有連接到它的類，但在聯動樣式規則是不存在的，就像他們在構建時得到了下降。
偏僻的
下一個.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;
}
uj5u.com熱心網友回復：
問題出在您的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檔案。多余的分號會破壞代碼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403288.html
標籤：
上一篇：無法讓容器根據其內容展開
下一篇：防止div立即展開