Next.js项目中Bootstrap变量覆盖失效问题求助

问题核心 #

你同时引入了两套Bootstrap样式资源：

• 自定义变量配置后编译的Bootstrap SCSS（在globals.scss中）
• Bootstrap官方预编译的CSS文件（在index.js中）

预编译的bootstrap.css优先级更高，直接覆盖了你通过SCSS变量定义的黑色primary颜色。

解决方案 #

1. 移除重复的预编译CSS导入
   删除index.js中的这行代码：

   import 'bootstrap/dist/css/bootstrap.css'
   

2. 保留正确的SCSS配置顺序
   确保globals.scss里的变量定义在Bootstrap导入之前：

   $primary: black;
   @import 'bootstrap/scss/bootstrap';
   

3. 验证生效
   重启Next.js开发服务器，刷新页面后通过浏览器调试器查看primary类的颜色，此时应该已变为黑色。

额外注意 #

• 不要同时混用Bootstrap的SCSS编译版和预编译CSS版，避免样式冲突
• 所有Bootstrap变量的自定义配置，都必须写在@import 'bootstrap/scss/bootstrap'语句之前

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