图标字体路径需相对于输出css文件，如css在dist/css/则@icon-font-path应为"../../webfonts"；unicode码点须小写十六进制无引号定义、用~"\@{icon-home}"转义插值；批量生成须用.for() mixin而非@each；class前缀变量与html必须严格一致。
图标字体路径变量必须相对于输出CSS，不是Less源文件
改完 @icon-font-path 却图标变方块，八成是路径算错了。Less 编译后生成的 CSS 文件在 dist/css/，那 @icon-font-path: "../../webfonts" 才对——它得从 dist/css/style.css 出发去找 dist/webfonts/，而不是从 src/styles/icons.less 出发。
常见错误：
- 写成
@icon-font-path: "../src/assets/fonts"（源码路径，编译后不存在） - 用 Webpack alias 写
@icon-font-path: "@/assets/fonts"（less-loader 不解析 alias） - 在 Vite 中漏掉
public/特殊规则，该用绝对路径@icon-font-path: "/fonts"
Unicode 码点变量要小写十六进制 + ~"" 转义插值
直接写 @icon-home: "\e900"，再 content: @icon-home，结果是字面量 "\e900"，浏览器不认。Less 不会把字符串里的反斜杠当 Unicode 转义处理。
正确做法分两步：
- 定义时去掉
\，用小写无引号前缀：@icon-home: "e900" - 使用时强制转义插值：
content: ~"\@{icon-home}"
别混写成 @icon-home: "icomoon\e900"——font-family 和码点必须分离，否则无法复用或批量生成类。
批量生成 .icon-xxx 类得用 .for() mixin，不是 @each
@each 是 Sass 语法，Less 里写就报 Unrecognised input。真要用循环，只能靠社区通用的 .for() mixin，本质是递归展开。
关键约束：
-
@icon-map必须是空格分隔的键值对：@icon-map: "home" "\e900" "search" "\e901" -
.for()第二个参数里用@key和@value，不能嵌套太深，大括号位置要对 - 码点必须带双引号和反斜杠：
"\e900"，写成e900或'\e900'都无效
如果图标实际走 SVG symbol 或 <use></use>，content 就不该设值，得换 background-image 或伪元素 mask，此时循环生成的是不同逻辑。
class 前缀变量和 HTML class 必须严格一致
@icon-class-prefix: "ic" 意味着你 HTML 得写 class="ic-home"，Less 编译器不会校验这个对应关系，错了只显示空白或方块。
容易被忽略的点：
- 前缀末尾要不要加短横线？写成
@icon-class-prefix: "ic-"，那调用就是.@{icon-class-prefix}home，比每次拼接更稳 - 多个图标库共存时（如 Font Awesome + IcoMoon），必须分文件定义各自前缀：
fa-class-prefix、ic-class-prefix，避免冲突 - 前缀变量只参与 Less 编译，不影响运行时 JS 动态添加 class 的逻辑，别指望它自动注入或校验 DOM
最麻烦的不是写错，而是改了前缀却漏改 HTML 模板或组件库封装层——这类问题往往压到测试阶段才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
