CSS引入公共样式方法：@import导入WXSS文件

微信小程序中使用`@import`引入公共WXSS样式看似简单，实则暗藏诸多易错细节：必须严格使用带`./`或`../`的相对路径，绝对路径、别名、缺前缀的路径均会静默失效；嵌套导入不得超过5层，否则后续样式直接丢失；更重要的是，`@import`仅在当前页面生效，绝非全局——真正通用的样式必须写入`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」看最终生效的样式来源，比猜快得多

本篇关于《CSS引入公共样式方法：@import导入WXSS文件》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！