html模板不支持less/scss语法，浏览器原生无法解析，必须通过cli预编译为css后引入；开发中禁用浏览器端实时编译，生产环境严禁部署源文件。
HTML 模板本身不支持变量、嵌套或混合等预处理能力——<style></style> 标签里写 @variable 或 $color 会直接被浏览器忽略，不是语法错，是根本不认识。
浏览器原生不解析 .less/.scss 文件
你在 index.html 里写 <link rel="stylesheet" href="main.less">，浏览器只会把它当纯文本下载，不会编译，也不会应用样式。这不是路径问题，也不是版本问题，是能力缺失。
常见错误现象：
- 页面空白或样式丢失，控制台无报错（因为没触发任何 CSS 解析）
- Network 面板看到
main.less返回 200，但 MIME 类型是text/plain - 右键“查看页面源代码”能看到
.less内容，但开发者工具的 Styles 面板里查不到对应规则
生产环境必须用 CLI 预编译为 CSS
唯一上线可行方案：把 .less 或 .scss 文件用命令行工具转成标准 CSS，再引入。
实操建议：
- 安装全局工具：
npm install -g less或npm install -g sass - 编译命令示例：
lessc src/style.less dist/style.css，或sass src/style.scss dist/style.css -
index.html中只引入编译结果：<link rel="stylesheet" href="dist/style.css"> - 别把
.less/.scss文件部署到线上服务器——既无用，又暴露项目结构
开发阶段别用 less.js/sass.js 做实时编译
虽然 less.js 可通过 <script src="less.js"></script> + <style type="text/less"></style> 实现浏览器端编译，但实际不可靠：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 首次加载卡顿明显：所有 Less 要在客户端逐行解析+编译，阻塞渲染
- 报错定位失效：错误堆栈指向
less.js内部某行，不是你写的variables.less第 12 行 - Sass 官方根本不提供浏览器运行时；
sass.js是非官方移植版，体积大、不支持@use、无 source map - 现代构建工具（Vite/webpack dev server）的 HMR 编译速度更快、错误提示更准、支持热替换
零构建环境下的临时替代方案
如果真不能用任何构建工具（比如纯静态 HTML 演示页），唯一能“用上变量效果”的方式是：手动编译好内容，粘贴进内联 <style></style>。
例如，你写了：
@primary: #3498db;
.header { color: @primary; }
那就先用 lessc 编译出：
.header { color: #3498db; }
再复制进去：
<style>.header { color: #3498db; }</style>
这不是“HTML 使用变量”，只是把编译结果硬编码进去——变量逻辑完全丢失，改颜色就得重编译+重粘贴。
真正关键的分水岭不在语法差异，而在于是否接受「CSS 必须经过一道转换才能运行」这个事实。绕过它，就等于在要求浏览器执行一门它根本没设计去理解的语言。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
