使用LESS作为CSS预处理器时网页自定义亮色调无法正常显示的问题咨询

• 最高概率核心诱因：自定义类名与Bootstrap内置工具类重名导致的样式覆盖
  • 你定义的.bg-secondary 和Bootstrap框架自带的同名工具类完全重名，且两者都使用了!important 声明，此类场景下CSS的最终生效规则由样式文件的加载顺序决定。如果项目近期依赖升级导致Bootstrap内置.bg-secondary 映射的默认色值调整为纯白色，且Bootstrap样式的加载优先级高于你自定义的main.css，就会出现PhpStorm能识别你本地LESS规则绑定的#fff2f2色值，但页面实际被渲染为纯白的现象。你之前测试调整色值到“足够亮”就生效的体验，本质是因为调整后的色值和被覆盖的纯白默认值产生了足够的视觉差，让你误以为规则生效了，实际上你的自定义规则始终没有跑到最高优先级。
  • 快速验证：打开浏览器开发者工具，定位目标元素的background-color属性生效来源，若规则来自Bootstrap样式文件而非自定义的main.css，即可确认冲突。
• 排除验证逻辑：
  直接给目标元素添加内联样式style="background-color:#fff2f2"，若此时浅粉色可正常渲染，说明你的色值定义、LESS编译流程完全没有问题，和Web标准更新也无关联，问题根源完全出在类名覆盖环节。
• 落地修复方案：
  将自定义工具类重命名为框架未预留的名称，比如修改为.bg-clr-secondary，避开Bootstrap内置的.bg-primary/.bg-secondary/.bg-success等预设工具类的命名空间，重新编译LESS后即可恢复正常渲染。
• 其他同步排查项：
  • 检查近期是否开启了浏览器或系统的强制高对比度模式：这类功能会自动将视觉差异极小的浅色调替换为系统默认纯白背景，开发者工具中会对被覆盖的样式标注“用户代理覆盖”标记，和代码问题可快速区分。
  • 修正LESS变量的运算隐患：当前定义中@clr-grey-dm: @clr-grey * 2; 的写法存在逻辑问题，颜色通道值运算超出0-255的合法范围时不会自动截断，会导致最终渲染色值和预期偏差，后续排查颜色异常时可优先检查这类规则。

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