[英]Why is Next.JS automatically removing CSS during production build?
将我的 Next.JS 站点 w.r.t 部署到 CSS 加载时,我遇到了不确定性。
在本地,它看起来符合预期,但在部署时,CSS 规则完全缺失。 我看到该元素附加了class,但关联的样式规则不存在,几乎就像它们在构建时被丢弃一样。
https://personal-blog-mocha.vercel.app/
https://github.com/Schachte/personal-blog
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;
#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;
}
问题出在您的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文件。 多余的分号会破坏代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.