@import仅在.wxss文件中有效且需相对路径和.wxss后缀，写错位置、路径或后缀会导致静默失效；app.wxss是唯一全局生效入口，推荐将重置样式、变量等统一收口于此；引入字体须转base64并置于app.wxss中。
@import 只在 .wxss 文件里有效，且路径必须是相对路径、带 .wxss 后缀。写错位置（比如塞进 .wxml 或 .js）、用错路径（如以 / 开头或漏掉 ./）、省略后缀，都会导致样式静默失效——编译不报错，但页面完全没反应。
为什么 @import 写在页面 wxss 里却没生效？
最常见原因是路径错误或上下文错位：
-
@import "/styles/base.wxss"→ 绝对路径被忽略，不加载 -
@import "styles/base.wxss"→ 缺少./，报Cannot find module 'styles/base.wxss' -
@import "base.css"→ 后缀不是.wxss，不识别，无提示 - 把
@import写在.wxml或.js中 → 完全无效，语法不支持 - 嵌套
@import超过 5 层 → 编译器可能丢弃后续引入
调试时打开开发者工具「增强编译」，并检查控制台是否有 Failed to load resource 提示。
全局公共样式该放 app.wxss 还是到处 @import？
app.wxss 是唯一真正全局生效的入口，所有页面和组件默认继承它（除非组件启用了 styleIsolation: "isolated"）。
- 推荐做法：把重置样式、变量、通用 class 全部收口到
app.wxss，再用@import组织，例如：@import "./styles/reset.wxss";@import "./styles/variables.wxss";@import "./styles/utils.wxss"; - 避免在每个页面
index.wxss里重复@import同一个文件，否则易引发优先级混乱或样式叠加 - 组件内
@import的样式仅作用于该组件，无法穿透隔离边界
引入 iconfont 或字体文件要注意什么？
@font-face 的 url() 不接受 HTTP 地址，也不支持本地相对路径直接引用 ttf/woff —— 必须转成 base64。
- 下载 ttf 文件后，用 transfonter.org 转为 base64 格式
- 把生成的
@font-face块放进font.wxss，再通过@import "./font.wxss"引入 - 确保
font.wxss在app.wxss中引入，才能全局生效 - 注意 base64 字符串过长可能触发编辑器高亮卡顿，但不影响运行
最容易被忽略的是：样式隔离机制让组件内部的 @import 天然“看不见”外部定义的 CSS 变量或 mixin，如果依赖这些能力，得改用 CSS-in-JS 方案或提前注入到 app.wxss。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
