WXSS中@import必须用相对路径，如"./common.wxss"；不支持绝对路径、别名或无./的路径；嵌套不得超过5层；导入仅作用于当前页面，全局样式须放app.wxss。
WXSS里@import路径必须是相对路径，不能用绝对路径或包路径
微信小程序的@import只支持相对于当前 WXSS 文件的相对路径，不识别/styles/common.wxss这种根路径，也不认npm://或@/别名。写错就静默失败——没报错，但样式压根不生效。
- ✅ 正确写法：
@import "./common.wxss";（同级目录）或@import "../styles/base.wxss";（上层目录） - ❌ 错误写法：
@import "/styles/common.wxss";、@import "@/styles/common.wxss";、@import "styles/common.wxss";（缺./，会被当模块名处理） - ⚠️ 注意：路径区分大小写，Windows开发机容易忽略这点，上线后在iOS真机上突然失效
公共样式文件不能包含@import嵌套超过5层
小程序编译器对@import有深度限制，嵌套太深会直接截断，后续样式丢失且无提示。比如 A.wxss → B.wxss → C.wxss → D.wxss → E.wxss → F.wxss，F里的规则大概率不会被加载。
- 建议把基础变量、mixin、重置样式收进一个
base.wxss，由页面样式文件直接导入，避免多层传递 - 如果用了 Sass/Less 预处理器，务必在构建阶段就完成
@import合并，不要把未编译的嵌套源文件丢进小程序项目 - 检查方式：打开开发者工具「网络」面板，过滤
.wxss，看是否所有@import路径都返回200
全局样式要写在app.wxss里，页面级@import不等于全局生效
@import只是把样式文本拼接到当前文件末尾，它不改变作用域。你在index.wxss里@import "./common.wxss"，那些样式只对index.wxml里的元素起作用，其他页面照样看不到。
- 需要全局通用的类（如
.text-center、.border-1px），必须放在app.wxss中，或由app.wxss统一@import - 页面专属的公共样式（如商品卡片组件样式），可以单独建
components/goods-card/goods-card.wxss，由对应 WXML 所在页面的 WXSS 导入 - 别试图在
component.wxss里用@import实现“组件内全局”，自定义组件的样式隔离机制会让这类导入无效
使用@import时，!important优先级和覆盖逻辑容易误判
WXSS 的层叠规则和浏览器 CSS 一致，但因为@import是文本拼接，顺序决定优先级。后@import的文件，里面的同名选择器会覆盖前面的——哪怕它看起来“更不具体”。
- 例如：
common.wxss里有.btn { color: red; }，page.wxss里@import "./common.wxss"; @import "./override.wxss";，而override.wxss里只有.btn { color: blue; }，那最终就是蓝色 - 避免靠
!important硬顶，它在小程序里同样难维护；更稳妥的是控制@import顺序，或用更具体的选择器（如.page-home .btn） - 真遇到覆盖问题，用开发者工具「调试器」→「Computed」看最终生效的样式来源，比猜快得多
实际项目里最常卡住的，不是会不会写@import，而是路径写对了却没生效——十次有八次是少了个./，或者以为导入了就全局可用，结果只在当前页面起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
