Bootstrap 4 SASS：Table-Primary类未识别修改后的Primary颜色？

嘿，我来帮你搞定这个头疼的问题！Bootstrap 4的SASS变量系统有几个容易踩的小坑，结合你的描述，咱们一步步排查解决：

• 核心问题：你需要明确覆盖Bootstrap的$primary变量
  Bootstrap 4里的主色是通过$primary这个核心变量来控制的，虽然默认情况下$primary映射到$blue，但只重写$blue有时候会因为变量优先级或者内部映射细节不生效。最稳妥的方式是直接在自定义变量文件里定义$primary：

  // _custom-variables.scss 内容修改为
  $primary: #0078D2; // 直接指定你的主色
  $light: #F7F7F7;   // 保留你的浅色变量
  // 可选：如果需要同时修改Bootstrap的蓝色系变量，也可以加上
  $blue: #0078D2;
  

• 确认导入路径的正确性
  检查你的site.scss里的导入路径是否和文件结构匹配：

  • 如果site.scss和scss文件夹在同一层级，@import "scss/_custom-variables.scss";是没问题的，但可以尝试加上相对路径前缀./来避免路径解析问题：@import "./scss/_custom-variables.scss";
  • 注意SASS导入时可以省略下划线和.scss后缀，但确保文件名和路径完全对应，统一写法更不容易出错。

• 验证编译流程是否清除缓存
  很多时候旧的CSS缓存会导致你看不到新变量的效果：

  • 手动删除编译后的CSS文件，重新触发编译（不管你用的是Live Sass Compiler、Gulp还是Webpack）
  • 确认编译工具的入口文件是site.scss，没有误编译其他文件。

• 排查自定义主题文件的冲突
  检查你的_my-theme.scss里有没有重新定义$primary或者相关颜色变量，如果有的话，会覆盖你之前在_custom-variables.scss里的设置，记得保持变量定义的一致性。

另外要给你点个赞的是，你导入文件的顺序是完全正确的——自定义变量 → Bootstrap核心 → 自定义主题，这符合Bootstrap SASS的覆盖规则（因为Bootstrap的变量都带有!default标记，在它之前定义的变量会优先生效）。

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