如何在Next.js中正确自定义React-Bootstrap的Sass变量？

问题根因 #

1. 样式引入冲突：_app.tsx中同时引入了预编译完成的bootstrap/dist/css/bootstrap.min.css和自定义Sass文件，前者优先级更高，会直接覆盖你通过Sass变量自定义的样式，是变量不生效的核心原因。
2. 拼写与路径错误：
   • _app.tsx中引入全局样式的文件名拼写错误，你写的是globa.scss，正确名称是global.scss
   • global.scss中引入Bootstrap Sass的路径写法不规范，根路径写法在Next.js的Sass编译中无法正确识别，且@import './variables'缺少结尾分号，可能引发编译异常。
3. 变量覆盖顺序不符合要求：Bootstrap的Sass变量都带有!default标识，自定义覆盖的变量必须写在引入Bootstrap Sass入口之前，才会生效。如果你单独的variables.scss中已经定义了$primary，把自定义值写在引入variables.scss之后也会被覆盖。
4. 依赖版本不兼容：react-bootstrap 1.6.1仅适配Bootstrap 4，你安装的Bootstrap版本为5.1.0，版本不匹配会导致变量无法对应到组件样式。

解决方案 #

1. 调整_app.tsx引入逻辑，删除预编译Bootstrap CSS的引入，修正文件名拼写：

import '../styles/global.scss'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

2. 修正global.scss配置，调整变量顺序和引入路径：

// 所有自定义变量必须放在引入Bootstrap Sass之前
$primary: red;
// 如果有单独的变量文件，直接在此处引入即可，无需重复定义变量
// @import './variables.scss';

// 用~前缀指向node_modules目录，Next.js原生支持该写法
@import "~bootstrap/scss/bootstrap";

3. 安装Sass编译依赖（如果未安装）：

npm install sass --save

4. 适配依赖版本：
   • 方案A：保持react-bootstrap 1.x版本，将Bootstrap降级到4.x版本：npm install bootstrap@4.6.0
   • 方案B：保持Bootstrap 5.x版本，将react-bootstrap升级到2.x版本：npm install react-bootstrap@latest

调试方法 #

1. 元素样式检查：打开浏览器开发者工具，选中使用了primary属性的组件（比如Btn组件设置variant="primary"），查看对应的背景色、文字色属性，如果显示为你设置的红色则变量生效，若还是默认蓝色，查看样式来源确认是否还有残留的预编译Bootstrap CSS引入。
2. 编译产物检查：在开发者工具的网络面板中找到页面加载的CSS文件，搜索primary关键词，查看对应变量的编译结果是否为你设置的自定义值，可直接判断Sass编译阶段是否完成变量替换。
3. 测试变量有效性：在global.scss末尾添加测试代码：body { background-color: $primary; }，若页面背景变为你设置的红色，说明变量本身已被正确识别，问题出在组件和Bootstrap版本的适配。

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