Bootstrap背景色覆盖失效求助：调整SCSS文件结构后原色未生效

这是个很常见的路径+导入顺序问题！我帮你拆解一下原因和解决方案：

问题根源 #

你之前的所有SCSS文件和主文件styles.scss在同一目录下，@import路径能正确找到variables.scss，所以你的$primary: $orange !default;能在Bootstrap加载前覆盖它的默认变量，背景自然是橙色。

但把这些文件移到scss子文件夹后，你主文件里的@import路径还是原来的相对路径（比如@import "variables.scss";），这时候SCSS会在主文件所在的目录找这个文件，根本找不到子文件夹里的variables.scss——也就是说，你的自定义变量根本没被加载！

Bootstrap的$primary默认值是蓝色，既然你的变量没提前导入覆盖它，自然就用了默认的蓝色，背景就变了。

解决方案 #

1. 修正主文件的导入路径 #

把styles.scss里的所有导入路径改成指向scss子文件夹的相对路径，同时保证变量文件在Bootstrap之前导入，修改后的代码应该是这样：

// Core variables and mixins
@import "scss/variables.scss";
@import "scss/mixins.scss";
// Global CSS
@import 'bootstrap/scss/bootstrap.scss';
@import "scss/global.scss";
@import "scss/nav.scss";
@import "scss/resume-item.scss";
@import "scss/bootstrap-overrides.scss";

2. 重点注意导入顺序 #

这里要再强调一下：你的variables.scss必须在bootstrap.scss之前导入！因为SCSS的!default规则是“如果变量未定义则赋值”，如果先加载Bootstrap，它会先定义$primary为蓝色，之后你的变量文件里的$primary: $orange !default;就不会生效（因为变量已经被定义过了）。

小建议 #

如果你的项目允许，建议改用SCSS的@use规则代替@import（@import已经被官方标记为废弃），@use的路径处理更清晰，还能避免全局变量污染，但如果暂时用@import的话，只要路径和顺序正确就能解决问题。

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