Understrap子主题Sass颜色变量修改后不生效问题

问题场景 #

在Understrap子主题开发过程中，修改_theme_variables.scss中控制主题主色的$primary变量，在npm run watch-bs（browser-sync）监听服务运行状态下，将变量默认值从$purple调整为$orange后，首页样式未同步更新。
开发界面截图：

现有修改代码 #

_theme_variables.scss文件内容 #

$purple: #5533ff; // Thats a sample how you could change a BootStrap variable.
$orange:  #fd7e14;
$primary: $orange;  // Once we've changed the value, we'll also make it the primary brand color.

_theme.scss文件内容 #

// This is an empty scss file for your custom styles - Please add your super duper awesome mega design styles here
@import "theme_variables";

问题原因&遗漏操作 #

• 变量导入时机错误。Understrap基于Bootstrap的SCSS架构，所有依赖$primary等框架变量的组件样式，会在变量定义后一次性编译生成。你现在把自定义变量的导入放在_theme.scss里，这个文件是在Bootstrap、Understrap核心样式全部加载完成后才引入的，这时候再给$primary赋值，不会反向修改已经编译好的按钮、导航栏、链接等主色相关样式，变量覆写完全不生效。
• 未修改SCSS入口文件的导入顺序。Understrap子主题的SCSS编译入口默认是sass/style.scss，你只在_theme.scss里导入变量文件，没有把变量导入移到入口文件中所有框架依赖导入的最前面，变量覆写逻辑根本没进入框架编译流程。
• 增量编译缓存问题。watch模式默认走增量编译，只重新编译改动的文件，如果你之前已经编译过带旧$primary值的样式，单独修改变量文件如果没被入口文件监听到依赖变动，不会触发全量重编译，会持续输出旧的CSS产物。
• 基础配置校验缺失：需要先确认WordPress后台「外观-主题」中当前启用的是你正在修改的Understrap子主题，而非父主题或其他主题；同时确认浏览器没有缓存旧CSS文件，调试阶段可以打开开发者工具的「禁用缓存」选项避免干扰。

修复操作步骤 #

1. 找到子主题的SCSS编译入口，常规路径为子主题目录下的sass/style.scss，部分旧版本入口直接放在子主题根目录的style.scss。
2. 调整导入顺序，必须把@import "theme_variables";挪到所有Understrap核心、Bootstrap框架导入语句的最前面，参考正确结构：

// 最先加载自定义变量覆写，必须放在最顶部
@import "theme_variables";
// 其次加载Understrap父主题核心、Bootstrap框架依赖
@import "../../understrap/sass/understrap";
// 最后加载自定义业务样式
@import "theme";

3. 按Ctrl+C停掉当前运行的watch-bs进程，执行npm run build跑一次全量编译，确认编译输出的CSS文件中主色值已经替换为橙色后，再重新执行npm run watch-bs启动监听，打开页面按Ctrl+F5硬刷新清缓存即可看到主色变更效果。

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