VSCode 不编译 Less，需借助 lessc 命令行或 Easy LESS 插件生成 CSS；Live Server 仅提供本地服务与热重载，不处理编译，故 HTML 中引用的 CSS 文件必须真实存在且路径匹配。
VSCode 本身不编译 Less，也不自动把 .less 转成 .css；你得靠外部工具链补上这环，否则 HTML 里引用的 CSS 文件根本不存在或不会更新。
为什么直接用 Live Server 打不开 Less 样式
Live Server 只起 HTTP 服务、监听文件保存并刷新页面，它不管文件内容转换。如果你在 index.html 里写的是 <link rel="stylesheet" href="style.css">，但项目里只有 style.less，浏览器就加载不到任何样式——style.css 根本没生成。
-
file://协议下，浏览器甚至会拒绝加载本地.less文件（无 MIME 支持） - Live Server 的热重载只响应文件写入事件，不触发编译逻辑
- Less 是预处理器，必须显式调用
lessc或通过构建工具转化
用 lessc 命令行手动编译（最轻量）
适合单页、少文件、不想装构建工具的场景。前提是已全局安装 less：npm install -g less。
- 在终端中执行：
lessc style.less style.css，生成对应 CSS - 加
--watch参数可监听变化：lessc --watch style.less style.css - 如果用了
@import，确保路径相对.less文件本身，不是相对于命令执行目录 - 注意：Windows 上 PowerShell 可能报错“无法加载脚本”，换用 VS Code 内置的 CMD 或 Git Bash
用 VSCode 插件自动编译（免终端）
推荐插件：Easy LESS（作者: mrcrowl），比老版本的 LESS Compiler 更稳定，支持保存即编译、错误提示和 Source Map。
立即学习“前端免费学习笔记（深入）”；
- 安装后默认监听
.less文件，保存时自动生成同名.css和.css.map - 可在设置中指定输出目录，比如把所有 CSS 输出到
dist/css/，避免污染源码目录 - 不支持跨文件夹
@import的智能路径解析，若@import "../vars.less"报错，就改用相对当前文件的路径 - 插件不会启动服务器，仍需搭配 Live Server 插件才能预览
HTML 中怎么引用才不出错
关键不是“怎么写”，而是“引用路径必须匹配编译后的文件位置”。常见断裂点：
- HTML 中写
href="css/style.css"，但Easy LESS默认输出到同级目录 → 改为href="style.css"或调整插件输出路径 - 用了
lessc --source-map但没把.map文件一起部署 → 浏览器开发者工具里看不到原始.less行号 - Live Server 启动路径是工作区根目录，所以
<link href="src/style.css">要求文件真正在src/下，不能靠插件输出到别处还硬写这个路径
最容易被忽略的是：编译和预览两个动作完全解耦。你得同时确认两件事——style.css 文件是否真实存在且时间戳最新，以及 Live Server 是否正服务于该文件所在目录。漏掉任一环，页面就只是 HTML 没样式。
