XAMPP不支持SASS/LESS自动编译，因其仅为HTTP服务器，无内置预处理器；需借助less.js（浏览器端）或Dart Sass（命令行）等外部工具实现编译，多端口仅解决并行访问问题。
XAMPP 本身不支持 SASS/LESS 编译，配置多端口只是让不同项目能并行访问，编译必须靠外部工具或 PHP 脚本实现。直接在 XAMPP 上“开启端口就自动编译”是常见误解。
为什么不能靠 Apache 自动编译 SASS/LESS？
Apache 是 HTTP 服务器，只负责文件分发和 PHP 执行，它没有内置的 CSS 预处理器运行时。less.js 是浏览器端运行的 JS 库，依赖 http:// 协议加载 .less 文件；而 sass（Dart Sass）是命令行工具，需手动或通过构建脚本触发。XAMPP 控制面板里无论开多少端口，都不会让 sass 命令自动监听文件变化。
- 误以为改了
Listen 8080和Listen 8081就能“启用 SASS 支持”，其实只是开了两个 HTTP 入口 - 用
file://直接打开 HTML 会触发 CORS 错误，这不是端口问题，而是协议限制 —— 必须走http://localhost:8080这类地址才能让less.js正常工作 - PHP 中调用
exec('sass')可行，但需确保系统 PATH 包含 Dart Sass，且 Apache 用户有执行权限（Windows 下常因权限被拒静默失败）
多端口 + LESS 浏览器编译的最小可行配置
目标：一个端口跑一个项目，每个项目用 less.js 在浏览器里实时编译 .less → .css，无需 Node 构建流程。
XAMPP 8.0.30
下载
XAMPP 8.0.30 是一款免费、开源的跨平台 Web 服务器集成包，专为快速搭建本地 PHP 开发环境而设计。该版本核心组件包括：Apache 2.4.56、MySQL 8.0.33、PHP 8.0.30、phpMyAdmin 5.2.1 等。它支持 Windows、Linux 和 macOS 系统，可让开发者在个人电脑上轻松模拟服务器环境，无需复杂配置即可运行 WordPress、Thin
- 确认
httpd.conf已启用虚拟主机：Include conf/extra/httpd-vhosts.conf前面的#必须删掉 - 在
httpd-vhosts.conf中为每个项目配独立端口，例如：<VirtualHost *:8080>对应DocumentRoot "C:/projects/site-a"，<VirtualHost *:8081>对应"C:/projects/site-b" - 每个项目的 HTML 中必须引入
less.js，且<link rel="stylesheet/less" href="styles.less">—— 注意不是rel="stylesheet"，否则浏览器当普通 CSS 加载，不会触发编译 - 确保
styles.less路径可被 HTTP 访问（即放在DocumentRoot下），不能是绝对磁盘路径 - 首次访问时浏览器控制台若报
less.js: error loading styles.less，先检查 URL 是否返回 404，再确认 Apache 的Directory配置是否允许读取该文件（Require all granted）
多端口 + SASS 命令行编译的可靠做法
比浏览器编译更稳定，适合开发中频繁修改样式。关键不是“XAMPP 配置 SASS”，而是让每个端口对应的项目目录能被构建工具识别。
- 在每个项目根目录下初始化
package.json，安装sass：npm install --save-dev sass - 添加 script：
"build:sass": "sass src/styles.scss dist/styles.css --watch"，然后用npm run build:sass启动监听 - Apache 端口只服务
dist/目录下的最终 CSS，不暴露源文件 —— 这样既安全，又避免开发者误改生成文件 - 如果不想装 Node，可用 PHP 封装调用：
exec('C: oolssasssass.exe C:projectssite-asrcmain.scss C:projectssite-adistmain.css 2>&1', $out, $code)，但要注意exec在 Windows 上默认被禁用，需在php.ini中取消disable_functions里的exec - 别把
sass可执行文件放htdocs下，Apache 可能把它当 CGI 脚本执行，导致 500 错误
容易被忽略的 Windows 权限与路径坑
Windows 下 XAMPP 多端口 + 预编译最常卡在这几步，不是配置错，而是环境没对齐。
-
DocumentRoot路径必须用正斜杠/或双反斜杠\，单反斜杠会被 Apache 解析成转义符，导致路径错误（如C:projectssite→ 实际变成C:rojectssite） - Apache 服务默认以
SYSTEM身份运行，无法读取 NTFS 权限受限的用户目录（比如C:/Users/xxx/下的项目），建议把项目移到D:/projects/这类非系统盘路径，并右键目录 → 属性 → 安全 → 给Everyone或SYSTEM添加读取权限 - 用
httpd -t验证配置前，先确保所有DocumentRoot目录真实存在，且 Apache 有权限进入 ——httpd -t不检查目录权限，只报语法错误，但启动时会失败且日志只写OS 5: Access is denied. - 如果项目用了
@import引入其他.scss，Dart Sass 默认不递归查找node_modules，需加--load-path=node_modules参数，否则编译报File to import not found
真正卡住人的往往不是“怎么配端口”，而是 less.js 加载失败时没查网络面板看 404，或是 sass 命令在 PHP 里执行无声无息——先确认命令行能跑通，再封装进 Web 流程。
