app.wxss中@import路径必须为相对路径且以./或../开头，如@import "./styles/common.wxss"；不能以/开头、省略./或使用.css后缀，否则静默失效。
@import 只能在 .wxss 文件里用，且必须写在文件最顶部、无空行、无注释之前；微信小程序不支持直接引入 .css 文件，所有外部样式必须是 .wxss 后缀，否则静默失效。
app.wxss 中 @import 的路径怎么写才对？
路径必须是相对路径，以 ./ 或 ../ 开头，不能以 / 开头，也不能省略 ./。例如：
-
@import "./styles/reset.wxss";✅ 正确（从app.wxss所在目录出发） -
@import "styles/reset.wxss";❌ 编译报错：Cannot find module -
@import "/styles/reset.wxss";❌ 静默忽略，不加载 -
@import "reset.css";❌ 后缀不是.wxss，完全不识别
路径计算逻辑：假设 app.wxss 在项目根目录，而公共样式放在 styles/common.wxss，那就写 @import "./styles/common.wxss"；如果样式文件在 lib/base.wxss，就写 @import "./lib/base.wxss"。
为什么 @import 写在 app.wxss 里却没生效？
常见失效原因不是路径错，而是位置或格式问题：
- 前面有空行或
/* 注释 */→ 后续@import全部被跳过 - 多个
@import之间夹了空行 → 只有第一个生效 - 混用了
@import和普通样式规则（比如.btn { color: red; }）→@import必须在所有规则之前 - 嵌套引入超过 5 层（A → B → C → D → E → F）→ F 及之后的文件可能被编译器丢弃
调试时打开开发者工具「增强编译」，并检查控制台是否出现 Failed to load resource 提示——但注意：很多路径错误并不会触发该提示，属于静默失败。
想引入 iconfont 或自定义字体怎么办？
@font-face 的 url() 不支持本地相对路径（如 ./fonts/iconfont.woff），也不支持 HTTP 地址，唯一可行的是 base64 字符串：
- 下载
.ttf文件，用 transfonter.org 转成 base64 格式 - 把生成的
@font-face块单独存为fonts.wxss - 在
app.wxss顶部用@import "./fonts.wxss";引入 - 确保该
@font-face定义在app.wxss或其导入链中，否则组件内无法使用（样式隔离会阻断字体声明）
base64 字符串极长时，编辑器可能卡顿，但不影响运行；真正容易被忽略的是：字体类名（如 .icon-home）必须也在 app.wxss 或其导入文件中定义，不能只放 @font-face。
能不能把公共 CSS 直接塞进 app.wxss 而不 @import？
可以，但不推荐长期维护：
- 直接粘贴大段 CSS 进
app.wxss会导致文件臃肿、难以定位和复用 - 多人协作时，变量、mixin、重置样式等分散修改易冲突
- 样式优先级失控风险高（比如
.text这种泛命名可能意外覆盖子组件） - 真正适合收口到
app.wxss的是：CSS 变量（:root { --primary-color: #1890ff; }）、基础重置、工具类（.flex-center）、@font-face声明
复杂项目建议保持 app.wxss 极简，只做入口调度：@import 统一管理，而具体逻辑下沉到 styles/ 目录下分层组织。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
