这种情况我之前在项目里也碰到过，结合你说的「VS Live Server正常、XAMPP localhost失效」的差异，大概率是MIME类型配置问题或者缓存干扰导致的，咱们一步步排查解决：

1. 检查XAMPP Apache的CSS MIME类型配置 #

有时候XAMPP的Apache配置会意外丢失CSS文件的MIME类型声明，导致浏览器无法正确解析CSS变量。你可以这么操作：

• 打开XAMPP控制面板，点击Apache模块的「Config」按钮，选择httpd.conf文件打开
• 在文件里搜索AddType，找到类似下面的配置段，确保存在AddType text/css .css这一行：

  AddType text/html .html .htm
  AddType text/css .css
  AddType text/javascript .js
  

• 如果没有这行，手动添加进去，保存文件后重启XAMPP的Apache服务

2. 强制清除浏览器缓存 #

VS Live Server会自动重载资源，缓存问题很少见，但XAMPP环境下浏览器很可能缓存了旧的CSS文件（没包含变量声明的版本）。解决方法：

• 打开浏览器开发者工具（F12），切换到「Network」面板，勾选「Disable cache」选项（刷新页面时保持工具打开）
• 或者直接按Ctrl + Shift + R（Windows/Linux）或Cmd + Shift + R（Mac）强制刷新页面，跳过缓存加载最新资源

3. 验证CSS文件是否正确加载 #

虽然你说其他样式生效，但还是确认下CSS文件的加载状态更稳妥：

• 在浏览器开发者工具的「Network」面板里，找到你的CSS文件，查看它的HTTP状态码是不是200
• 点击该文件，查看「Response」标签页，确认里面确实包含:root { --accent-color: blue; }这段变量声明

4. 确认CSS加载顺序（次要排查点） #

因为你引入了Bootstrap的CDN，确保你的自定义CSS文件是在Bootstrap CSS之后加载的。虽然:root里的变量优先级很高，但如果加载顺序颠倒，极端情况下可能出现解析异常。比如HTML里的引用顺序应该是：

<link href="bootstrap.css的CDN链接" rel="stylesheet">
<link href="你的自定义CSS文件路径" rel="stylesheet">

按照上面的步骤排查，基本就能解决XAMPP环境下CSS变量不生效的问题了。

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