使用Sass自定义Bootstrap无效果，寻求项目配置排查方案

问题描述 #

尝试通过Sass对Bootstrap 5做自定义配置，已搭建好HTML页面，但在custom.scss中添加自定义属性后，页面完全没出现预期效果。已经对照《Missing Bootstrap 5》手册和Bootstrap 5官方文档的步骤操作，还是没解决问题，怀疑是项目配置出了问题，已经排查一天了。

项目设置截图：

排查步骤 #

• 核对custom.scss的代码顺序
  自定义变量必须写在导入Bootstrap核心文件之前，示例代码如下：

  // 先定义自定义变量
  $primary: #ff4500;
  $body-bg: #f0f2f5;
  
  // 再导入Bootstrap
  @import "../node_modules/bootstrap/scss/bootstrap";
  

  如果变量写在导入之后，Bootstrap的默认变量不会被覆盖。

• 确认编译工具的配置逻辑
  检查你的编译命令（比如原生Sass命令、Gulp、Webpack配置）是否正确指向custom.scss，且编译输出的CSS文件路径和HTML中引入的路径一致。比如用原生Sass编译的命令：

  sass src/scss/custom.scss dist/css/custom.css --watch
  

  同时要确保HTML里引入的是编译后的custom.css，而不是Bootstrap的CDN原生CSS文件。

• 检查变量命名的准确性
  Bootstrap 5的Sass变量带$前缀，且严格区分大小写，比如$primary不能写成$Primary。可以对照官方的变量列表确认命名是否正确。

• 验证项目依赖的完整性
  确保已经通过npm/yarn安装了Bootstrap和对应版本的Sass：

  npm install bootstrap sass --save-dev
  

  检查package.json里是否包含这两个依赖，且Bootstrap 5要求Sass版本在1.32.10及以上。

• 排查样式优先级冲突
  打开浏览器开发者工具，查看目标元素的样式规则，确认自定义属性是否被其他更高优先级的CSS（比如内联样式、ID选择器）覆盖。如果是，可以通过更具体的选择器提升自定义样式的优先级。

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