我之前也碰到过一模一样的问题！这大概率是因为Chrome的CSS Source Map在处理导入的Sass文件变量更新时，需要额外的配置或者触发方式，我整理了几个能解决的方法：

• 确认Sass编译工具的实时监听和Source Map生成设置
  如果你用的是node-sass或者dart-sass，要确保启动命令里同时开启了实时监听和正确生成Source Map：

  sass --watch style.scss style.css --source-map true
  

  另外要确认导入的下划线开头的部分文件（比如_colors.scss）路径正确，编译工具能正常识别并整合到主style.css中。

• 强制Chrome重新加载关联样式，禁用缓存
  Chrome的缓存很容易干扰样式更新，你可以：

  • 在DevTools的Sources面板中，右键点击修改后的_colors.scss文件，选择Save（或按Ctrl+S），然后按Ctrl+Shift+R强制刷新页面（不要用普通刷新）。
  • 打开DevTools右上角的齿轮图标进入设置，勾选Disable cache (while DevTools is open)，彻底避免缓存影响。

• 检查DevTools的实时编辑实验功能
  进入DevTools的Settings > Experiments，确保**CSS HMR (Hot Module Replacement)**选项已开启（不同Chrome版本位置可能略有调整），这个功能能让样式修改实时同步到页面，无需手动刷新。

• 验证Source Map的正确性
  打开生成的style.css.map文件，检查其中是否包含_colors.scss的正确路径和内容映射，确保编译过程中没有出现映射错误，导致Chrome无法关联到正确的原文件位置。

试试这些方法，我当时就是靠禁用缓存加强制刷新解决了这个问题！

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