sass无法自动读取图标文件，必须由构建工具（如vite、webpack）预先扫描生成_icon-map.scss，再用@each $name, $code in $icon-map遍历键值对，拼出.icon-#{$name}类并设content: #{$code}（码点需双反斜杠转义如"e900"），同时确保@font-face路径、font-family名称及mime类型配置正确。
直接用 @each 遍历图标映射表生成类名，别指望 Sass 自己读文件或生成字体——它只管输出 CSS，不碰文件系统。
为什么不能用 @import 或 @use 自动加载图标列表
Sass 没有运行时文件系统访问能力。所谓“自动读取图标集”，本质是构建工具（如 Vite、Webpack）提前扫描 icons/ 目录，生成一个 _icon-map.scss 文件，再由 Sass 加载。你看到的 $icon-map: (home: "e900", user: "e901") 是人工维护或脚本产出的结果，不是 Sass 探出来的。
- 直接写
@import "icons/*"会报错：Sass 不支持 glob 导入 -
@use "icons"要求该路径下存在icons.scss或_icons.scss，且必须是静态文件 - 试图在
@each里调用file-exists()或str-index()判断图标是否存在？这些函数无法触发外部 I/O，纯属无效操作
@each $name, $code in $icon-map 的正确写法和常见翻车点
核心是保证 $code 是带双反斜杠的合法 Unicode 字符串，比如 "e900"，而不是 "e900" 或 "e900"（单反斜杠会被 Sass 解析为转义序列，结果变成乱码）。
- 映射表必须是键值对形式：
(home: "\e900", search: "\e901")，不能是数组("e900", "e901") - 循环体内必须用
content: #{$code}，不能写content: unquote($code)——这会让e900变成普通文本，失去 Unicode 含义 - 别在循环里嵌套
@media或@import，容易导致编译崩溃或输出冗余规则 - 类名拼接要用
.icon-#{$name}，注意连字符位置，.icon#{$name}会生成.iconhome这种非法类名
font-face 声明和路径怎么配才不白忙活
字体文件路径写错、font-family 名称不一致、MIME 类型没配对——这三个地方任一出错，图标就全变方块，跟 Sass 循环写得多漂亮都没关系。
-
@font-face必须显式声明每种格式：url("./fonts/icons.woff2") format("woff2")，不能靠 mixin 自动生成，浏览器自己选 - 确保 CSS 中
font-family: "my-icons"和@font-face里的font-family: "my-icons"完全一致（包括引号、大小写、空格） - Web 服务器要返回正确的 MIME 类型：
font/woff2对应.woff2，否则 Chrome 会静默拒绝加载 - 路径必须相对于最终生成的 CSS 文件，不是相对于 Sass 源文件；用构建工具变量（如
$font-path）比硬编码更可靠
最常被忽略的是：Sass 编译完只是生成了 CSS，但图标是否显示，取决于字体文件是否真能被浏览器下载并解析。检查 Network 面板里 icons.woff2 是否 200，再看 Elements 面板里伪元素的 content 值是否被正确渲染为 Unicode 字符——这两步断了任何一环，前面所有 Sass 代码都等于白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
