微信小程序中@import仅支持.wxss文件，且必须顶格书写、带分号、路径正确（含./或../）、无BOM/空格/注释；全局样式应统一在app.wxss中引入，第三方库推荐使用已适配版本。
@import 在微信小程序里不能直接引入 .css 文件，必须转成 .wxss 且路径、位置、语法全对才生效。
@import "./xxx.css" 会静默失败
小程序编译器根本不识别 .css 后缀——哪怕文件真实存在、路径没错，写成 @import "./base.css"; 也完全不加载，控制台无报错，样式面板里找不到规则。这不是兼容性问题，是机制限制：WXSS 的 @import 只认 .wxss 后缀。
- 把
normalize.css改名为normalize.wxss是必要第一步，但不是充分条件 - 改后缀后还得手动删掉所有
@media、var(--color)、calc()，这些在基础库 2.25.2 之前全不支持 - 伪元素要从
::before改成:before，否则不渲染 - 单位优先转
rpx，rem/vh/vw在真机上表现不可控
@import 必须顶格写在 .wxss 文件第一行
任何前置内容都会让它失效：空行、BOM 字符、注释 /* 公共样式 */、甚至一个空格，编译器直接跳过整行，不提示、不报错、不加载。
- 正确写法：
@import "./styles/reset.wxss";（第一字符就是@） - 分号
;不可省，漏了整条语句被忽略 - 路径必须带
./或../，@import "styles/reset.wxss"会报Cannot find module - 路径区分大小写，
Base.wxss和base.wxss在 iOS 真机上是两个文件
全局样式只靠 app.wxss 可靠
你在 pages/index/index.wxss 里 @import，效果只限该页面；组件内 @import 还受 styleIsolation: "isolated" 隔离，根本影响不到外部。真正能覆盖全项目的，只有 app.wxss 里写的样式或它导入的文件。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：
app.wxss顶部统一写：@import "styles/variables.wxss";、@import "styles/utils.wxss"; - 公共类名如
.flex-center、.text-primary放这里，避免各页面重复引入导致权重混乱 - 别在多个页面 wxss 中都
@import同一个utils.wxss，叠加后!important都难覆盖 - 组件需要复用工具类？要么在组件自己的
component.wxss里显式@import，要么直接把类写进app.wxss
第三方 UI 库建议用已适配版本
ColorUI、weui-wxss 这类库本身就是按 WXSS 规范写的，开箱即用；自己硬啃 Bootstrap 源码转 wxss，90% 时间花在删 @media 和调单位上，还容易漏。
- weui-wxss：npm install 后拷
node_modules/weui-wxss/dist/style/weui.wxss到项目styles/目录，再在app.wxss里@import "styles/weui.wxss"; - ColorUI：下载 ZIP 后取
demo/colorui/colorui.wxss，放本地styles/，同样@import进app.wxss - 字体文件不能用
url(http://...)，得下 ttf → 转 base64 → 写进@font-face→ 在app.wxss引入
最常被卡住的其实是路径层级和空格——数错一个 ../，或者编辑器自动加了 BOM，样式就没了，而且没有任何提示。调试时先打开「增强编译」，再盯着控制台看有没有 Failed to load resource，比凭感觉改路径快得多。
