@import 必须顶格写在文件首行且路径为相对路径，否则静默失效；外部CSS需转为.wxss并裁剪不兼容内容；全局样式应统一写入app.wxss。
@import 必须顶格写在第一行，否则静默失效
小程序的 @import 不是“写了就生效”，它对位置极其敏感：前面不能有任何字符，包括 BOM、空格、制表符、/* 注释 */、甚至空行。一旦开头有干扰，整条 @import 就被跳过，控制台和网络面板都无提示。
- ✅ 正确：
@import "../../styles/base.wxss";（文件首行，无前导空格） - ❌ 错误：
@import "../../styles/base.wxss";（开头有空格） - ❌ 错误：
/* 公共样式 */@import "../../styles/base.wxss";（注释紧邻） - ❌ 错误：
@import "../../styles/base.wxss";\n\n.container { ... }（@import后跟空行）
路径必须是相对路径且以 ./ 或 ../ 开头
小程序不支持绝对路径（如 /styles/base.wxss）、包路径（如 @/styles/base.wxss）或无前缀路径（如 styles/base.wxss）。路径错误时，@import 会被忽略，不会报错，但网络面板里看不到对应 .wxss 请求。
- ✅ 正确：
@import "./utils.wxss";（同级目录） - ✅ 正确：
@import "../common/variables.wxss";（上一级再进 common） - ❌ 错误：
@import "/common/base.wxss";（以 / 开头） - ❌ 错误：
@import "common/base.wxss";（缺 ./ 或 ../） - ⚠️ 注意：路径区分大小写，
Base.wxss和base.wxss在 iOS 真机上可能表现不同
外部 CSS 文件需手动转为 .wxss 并裁剪兼容内容
直接把 bootstrap.css 改后缀成 bootstrap.wxss 并不能用。小程序 WXSS 不支持 @media、@keyframes、CSS 变量（var(--color)）、calc()，伪元素必须写成 :before 而非 ::before，单位推荐统一用 rpx（rem/vh/vw 表现不稳定）。
- 必须删掉所有
@media块，或手动转为 rpx 值的条件样式 - 替换
rem→rpx，但保留1px边框（真实像素需保留） - 将字体文件（如 iconfont）转为 base64 内联，
url('xxx.ttf')会失败 - 第三方库若依赖 JS 行为（如弹窗、下拉），光引入样式无效
全局样式优先走 app.wxss，避免页面级重复引入
@import 是纯文本拼接，不带作用域。你在 pages/index/index.wxss 里引入 common.wxss，它只对 index 页面生效；其他页面看不到。想让工具类（如 .flex-center）、颜色变量（--primary-color）全局可用，唯一可靠方式是写进 app.wxss。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
app.wxss顶部集中写：@import "styles/reset.wxss";、@import "styles/utils.wxss"; - ❌ 避免：多个页面各自
@import同一文件，易导致样式重复注入、层叠顺序错乱 - ⚠️ 注意：
app.wxss中的泛命名（如.text）可能意外覆盖子组件样式，需谨慎命名
真正容易被忽略的不是语法，而是它不报错——@import 失效时，你既看不到错误提示，也看不到网络请求，只能靠「网络」面板查 .wxss 是否返回 200，再进「样式」面板确认规则是否出现在 computed 样式里。
