less编译后css中文乱码并非less不支持中文，而是utf-8字节流在源文件编码、lessc输出、@charset声明或浏览器解析任一环节被误解为gbk/iso-8859-1；须确保.less为utf-8无bom、lessc显式输出utf-8、@charset"utf-8"严格首行无干扰、http响应头charset=utf-8一致。
Less 编译后 CSS 中文乱码，**不是 Less 不支持中文，而是 UTF-8 字节流在某个环节被当成 GBK 或 ISO-8859-1 解码了**。问题一定出在“源文件编码—编译输出—CSS 声明—浏览器解析”这四个环节中的至少一处错配。
确认 .less 源文件是 UTF-8 without BOM
VS Code 右下角显示 “UTF-8” ≠ 实际无 BOM；Sublime Text 默认保存可能带 BOM；Notepad++ 选 “UTF-8” 很容易误选成 “UTF-8-BOM”。BOM（\uFEFF）会破坏 @charset "UTF-8" 的有效性，也会干扰 less.render() 的输入解析。
- 用命令验证：
file -i style.less输出必须含charset=utf-8，且不含with BOM - VS Code：右下角点击编码 → “Save with Encoding” → 选
UTF-8（不是UTF-8 with BOM） - 已有 BOM？Linux/macOS 下执行：
sed -i '1s/^\xEF\xBB\xBF//' style.less
lessc 命令行编译必须显式控制输出编码
lessc 默认把 stdout 当作原始字节流写入，完全不关心终端 locale 或编辑器偏好。在 Windows PowerShell 或某些 Linux 终端下，lessc input.less > output.css 可能生成 GBK 编码的 CSS 文件，哪怕源文件是 UTF-8。
- PowerShell 正确写法：
lessc input.less | Out-File -Encoding UTF8 output.css - Linux/macOS：先确认
locale | grep UTF有输出，再执行重定向 - 最稳方案：改用 Node.js 脚本调用 API，全程锁定
utf8：const less = require('less');<br>const fs = require('fs').promises;<br><br>(async () => {<br> const content = await fs.readFile('style.less', 'utf8');<br> const { css } = await less.render(content, { paths: ['.'] });<br> await fs.writeFile('style.css', css, 'utf8'); // 关键：第三个参数必须是 'utf8'<br>})();
@charset "UTF-8" 必须严格位于 CSS 第一行且无干扰
@charset "UTF-8" 是 CSS 规范中唯一能覆盖浏览器默认编码的声明，但它极其脆弱——前面有一个空格、换行、注释或 BOM，整个声明就失效，浏览器立刻退回到系统 locale（如 Windows 下的 GBK），把 UTF-8 中文双字节错解为两个非法单字节。
- 用
xxd style.css | head -1检查开头三字节：不能出现ef bb bf - VS Code 打开 CSS 后，右下角确认编码是
UTF-8（非 BOM），再手动在第一行插入：@charset "UTF-8"; - 不要复制粘贴该行——某些编辑器会悄悄插入零宽空格（
\u200b），导致声明无效 - Chrome DevTools Sources 面板中打开该 CSS，确认顶部高亮显示
@charset "UTF-8";且无解析错误
HTTP 响应头 charset 必须与文件真实编码一致
当 CSS 通过 <link> 引入时，Content-Type: text/css; charset=utf-8 响应头优先级高于 @charset。如果服务器返回 charset=gbk，哪怕 CSS 文件里写了 @charset "UTF-8"，浏览器仍用 GBK 解码，中文照样乱码。
- Chrome DevTools Network 标签页 → 找到 CSS 请求 → Headers → Response Headers → 查看
Content-Type是否含charset=utf-8 - Vite / Webpack Dev Server 默认发
charset=utf-8；Nginx 需显式配置charset utf-8; - 本地
file://协议下，响应头不存在，@charset大概率被忽略——开发阶段务必用vite dev、python -m http.server等本地服务，别双击打开 HTML
最容易被忽略的是：路径里的中文（比如 @import "按钮.less" 或 url("图标.png")）和编码无关，它触发的是 Less 解析器词法分析失败，报 Unrecognised input，这种问题只能靠构建工具配置英文 paths 来绕过，改编码毫无作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
