Next.js 13.4.1生产构建时Bootstrap与全局SCSS样式覆盖问题

问题现象 #

开发环境下Bootstrap与自定义SCSS样式均正常显示，但生产构建后Bootstrap样式完全失效，仅main.scss中的自定义样式生效。

文件结构 #

/app
  /css
    main.min.css
    main.min.css.map
  /scss
    _fonts.css
    _header_footer.scss
    _mixins.scss
    _responsive.scss
    main.scss
  layout.jsx

当前配置 #

main.scss 导入内容 #

@import "bootstrap/dist/css/bootstrap.css";
@import "@fortawesome/fontawesome-free/css/all.min.css";
@import "nouislider/dist/nouislider.min.css";
@import "@splidejs/splide/dist/css/splide.min.css";
@import "_mixins";
@import "_header_footer";
@import "_fonts";

RootLayout (layout.jsx) 导入代码 #

import './css/main.min.css'

已尝试的方案 #

• 在layout.jsx中直接导入bootstrap/dist/css/bootstrap.css：生产环境Bootstrap样式生效，但自定义SCSS样式（如body字体、a标签取消文本装饰）失效
• 创建_app.js导入Bootstrap与全局CSS（App Router已废弃该文件，无效果）
• 在/app根目录创建global.scss并调整导入顺序，未解决问题
• 在main.scss中调整Bootstrap导入位置、移除min后缀，未彻底解决

解决方案 #

1. 调整全局样式导入方式 #

删除layout.jsx中对预编译CSS的导入，改为直接导入SCSS源文件：

// layout.jsx
import './scss/main.scss'

2. 移除手动预编译的CSS文件 #

删除/app/css目录下的main.min.css和main.min.css.map，让Next.js在构建时自动处理SCSS的编译、压缩与打包，避免手动预编译导致的资源丢失问题。

3. 完善SCSS导入顺序 #

确保第三方样式在自定义样式之前导入，同时补上未导入的_responsive.scss，保证自定义样式能正确覆盖Bootstrap默认样式：

// main.scss
// 第三方样式优先导入
@import "bootstrap/dist/css/bootstrap.css";
@import "@fortawesome/fontawesome-free/css/all.min.css";
@import "nouislider/dist/nouislider.min.css";
@import "@splidejs/splide/dist/css/splide.min.css";

// 自定义SCSS模块按逻辑导入
@import "_mixins";
@import "_header_footer";
@import "_fonts";
@import "_responsive";

4. 确保SCSS编译依赖正常 #

确认已安装sass依赖，Next.js 13需要该包解析SCSS文件：

npm install sass --save-dev

5. 验证生产构建 #

执行构建并启动生产服务验证样式效果：

npm run build
npm run start

原因说明 #

• Next.js 13 App Router对全局CSS的处理依赖构建工具对源文件（如SCSS）的解析，手动导入预编译的min.css会导致生产构建时资源路径或打包逻辑异常，丢失Bootstrap样式。
• 直接在layout.jsx导入Bootstrap会导致其样式优先级高于自定义SCSS（导入顺序靠后），从而覆盖自定义样式；通过SCSS统一导入可保证样式顺序正确，让自定义样式正常生效。

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