@import 必须位于 .wxss 文件首行首个字符,且路径须为带 ./ 或 ../ 的相对路径、后缀为 .wxss、大小写敏感;仅 app.wxss 中的 @import 才全局生效,组件内 @import 受样式隔离限制。

@import 必须写在 .wxss 文件最顶部
任何空格、注释、BOM 或空行都会让 @import 静默失效——编译器直接跳过,不报错也不加载。这是页面样式“突然不生效”的头号原因。
- 错误写法:
/* 公共样式 */@import "./common/base.wxss";(注释紧挨着) - 错误写法:
@import "./common/base.wxss";(前面有空行) - 正确写法:文件第一行第一个字符必须是
@,例如:@import "./common/base.wxss"; - 分号
;不能省,漏了整行被忽略
路径必须是相对路径且带 ./ 或 ../
@import 不认绝对路径、别名、变量或网络地址;路径基准是当前 .wxss 文件所在位置,必须手动数准层级。
- 无效:
@import "/styles/base.wxss"(以/开头) - 无效:
@import "styles/base.wxss"(缺./) - 无效:
@import "./common/base.css"(后缀必须是.wxss) - 有效:
@import "../../styles/base.wxss"(从pages/index/index.wxss出发,向上两级到根目录) - 大小写敏感:iOS 真机上
Base.wxss和base.wxss是两个不同文件
app.wxss 是全局样式的唯一可靠入口
只有 app.wxss 里的样式(含它 @import 进来的)才会自动注入所有页面和组件。你在某个页面的 index.wxss 里 @import,效果仅限该页面。
- 推荐结构:在
app.wxss顶部统一导入:@import "styles/reset.wxss";、@import "styles/utils.wxss";、@import "styles/variables.wxss"; - 避免在多个页面重复
@import同一文件,否则可能引发权重混乱或样式叠加 - 公共类如
.flex-center、.text-sm应放这里;泛命名(如.text)需谨慎,易污染子组件
组件内 @import 受样式隔离限制
自定义组件默认启用 styleIsolation: "isolated",组件内部的 @import 只作用于自身,无法穿透影响页面或其他组件。
立即学习“前端免费学习笔记(深入)”;
- 不能靠组件里的
@import“偷偷”注入全局样式 - 若组件需复用工具类,应在组件自己的
component.wxss中显式@import "./utils.wxss"(路径相对于组件根目录) - 想让样式跨组件生效?只能走
app.wxss全局注入,或改用styleIsolation: "apply-shared"(但会削弱隔离性)
真正容易被忽略的,是路径计算和文件层级——开发者常凭感觉写 ../,但实际从当前文件出发向上跳的层数稍错一点,就彻底失效,而且没有任何反馈。


















