Next.js执行npm run build与npm start后样式错乱问题求解

开发模式下Next.js通过style-loader以热更新方式注入样式，对CSS导入顺序无严格校验；生产构建时mini-css-extract-plugin会将所有CSS合并为静态文件，严格按照依赖解析顺序合并选择器优先级，一旦导入顺序和开发阶段不一致，就会出现样式覆盖、组件重叠这类异常表现。

• 全局CSS（含UI库基础样式、reset样式）分散在多个页面/组件中导入，没有统一的导入入口
• 第三方UI库、Tailwind CSS等基础框架样式的导入顺序晚于业务自定义样式，导致生产打包时基础样式覆盖了业务自定义的优先级
• 在CSS文件内部使用@import语法嵌套导入其他CSS，webpack的依赖解析逻辑会打乱原有导入顺序
• 懒加载路由的组件中导入了全局样式，生产打包时这类样式的合并顺序和开发阶段不一致

• 统一全局样式导入入口：所有公共基础CSS、第三方UI库CSS仅在app/layout.tsx（App Router）或pages/_app.tsx（Pages Router）中按固定优先级顺序导入，禁止在单个页面/业务组件中导入全局类CSS
• 调整样式导入优先级顺序：按照「基础reset样式 → 第三方UI库基础样式 → Tailwind等框架指令 → 业务公共覆盖样式 → 页面级样式」的顺序固定导入，确保和开发阶段的样式优先级一致
• 避免CSS内部嵌套导入：不要在CSS文件中使用@import语法导入其他CSS，统一改为在JS/TS入口文件中导入，让webpack按导入顺序明确打包
• 给业务自定义样式加命名空间：如果确实需要在组件中引入全局类样式，给业务容器添加专属父类选择器前缀，避免和其他通用样式同优先级竞争
• 临时兜底方案（不推荐长期使用）：可在next.config.js中配置experimental.optimizeCss: false关闭生产CSS压缩优化，临时绕开顺序校验，但会增大CSS产物体积

内容的提问来源于stack exchange，提问作者Sachin Titus