Next.js生产环境CSS @import被置于文件中间，如何修复？

问题根源 #

生产环境下Next.js的CSS优化会将@import内联到主样式文件中，但嵌套的@import（比如base.css里的@import）会被插入到主文件的中间位置，违反CSS规则中「@import必须放在样式表最顶部」的要求，导致浏览器忽略这些导入，进而出现字体加载失败、样式异常的问题。本地开发环境因热重载的处理逻辑不同，不会触发这个问题。

解决方案 #

方案1：使用PostCSS提前扁平化所有@import #

通过postcss-import插件在webpack处理CSS前，将所有嵌套的@import合并到最顶部，确保最终生成的CSS符合规则：

1. 安装依赖：

npm install postcss-import --save-dev

2. 在项目根目录创建postcss.config.js：

module.exports = {
  plugins: {
    'postcss-import': {},
    // 保留你原本的其他PostCSS插件（如autoprefixer）
  }
}

Next.js会自动读取这个配置，构建时会将所有@import提前到样式文件顶部，解决浏览器警告和样式失效问题。

方案2：调整CSS引入顺序，跳过嵌套@import #

如果无法修改外部模块的CSS结构，可在pages/_app.js中直接按顺序引入所有依赖的CSS文件，避免嵌套导入：

// 先引入所有带@import的依赖文件
import 'external-module-1/reset.css';
import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
import '@code-hike/mdx/dist/index.css';
import 'external-module-1/font.css';

// 再引入外部模块的主样式文件
import 'external-module-1/base.css';
import 'external-module-1/light.css';
import 'external-module-1/theme.css';
import 'external-module-1/dark.css';

这种方式让Next.js在生产构建时按顺序合并所有CSS，确保远程字体、第三方库的CSS导入都在最顶部。

方案3：修改外部模块的CSS结构（若有权限） #

如果可以修改external-module-1的代码，将所有@import统一移到index.css的最顶部，消除嵌套导入：

// index.css
// 先放所有嵌套的@import
@import 'reset.css';
@import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
@import '@code-hike/mdx/dist/index.css';
@import url('https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400%3B700&family=Noto+Sans+Armenian:wght@400%3B700&family=Noto+Sans+Bengali:wght@400%3B700&family=Noto+Sans+Canadian+Aboriginal:wght@400%3B700&family=Noto+Sans+Cuneiform&family=Noto+Sans+Devanagari:wght@400%3B700&family=Noto+Sans+Egyptian+Hieroglyphs&family=Noto+Sans+Ethiopic:wght@400%3B700&family=Noto+Sans+Georgian:wght@400%3B700&family=Noto+Sans+Gujarati:wght@400%3B700&family=Noto+Sans+Gurmukhi:wght@400%3B700&family=Noto+Sans+Hebrew:wght@400%3B700&family=Noto+Sans+JP:wght@400%3B700&family=Noto+Sans+KR:wght@400%3B700&family=Noto+Sans+Kannada:wght@400%3B700&family=Noto+Sans+Khmer:wght@400%3B700&family=Noto+Sans+Malayalam:wght@400%3B700&family=Noto+Sans:wght@400%3B700&family=Noto+Sans+Mono:wght@400%3B700&family=Noto+Sans+Oriya:wght@400%3B700&family=Noto+Sans+Runic&family=Noto+Sans+SC:wght@400%3B700&family=Noto+Sans+Sinhala:wght@400%3B700&family=Noto+Sans+Syriac&family=Noto+Sans+Tamil:wght@400%3B700&family=Noto+Sans+Telugu:wght@400%3B700&family=Noto+Sans+Thai:wght@400%3B700&family=Noto+Serif+Tibetan:wght@400%3B700&display=swap');

// 再引入模块本地样式文件
@import 'base.css';
@import 'light.css';
@import 'theme.css';
@import 'dark.css';
@import 'font.css';

注意：修改后需要确保base.css和font.css中不再包含@import语句，避免再次嵌套。

内容的提问来源于stack exchange，提问作者Lance Pollard