@import 只在.wxss文件中生效，路径须为相对路径且带.wxss后缀；app.wxss是全局样式唯一入口，应统一管理公共样式；组件内@import受样式隔离限制，无法穿透作用域。

为什么 @import 在某些页面不生效？

微信小程序中 @import 只支持在 .wxss 文件中使用，且路径必须是相对路径（不能以 / 开头），也不能是网络地址或变量。常见错误是把 @import 写在 .wxml 或 .js 里，或者路径写成 @import '/styles/base.wxss' —— 这会导致编译时静默失败，样式完全不加载。

正确做法是：在目标页面的 index.wxss（或组件的 component.wxss）顶部第一行写：

@import "./common/base.wxss";

注意：./ 不能省略；如果文件在同一级，就用 @import "base.wxss";；路径中的 .wxss 后缀不可省略。

全局公共样式该放哪？app.wxss 是唯一入口吗？

是的。app.wxss 是整个小程序的全局样式表，它会被自动注入到所有页面和组件中（除非组件设置了 styleIsolation: "isolated"）。所以最稳妥的公共样式引入方式，不是到处 @import，而是把基础重置、通用 class、主题变量等统一写进 app.wxss，再通过 @import 在其中组织：

@import "./styles/reset.wxss";
@import "./styles/variables.wxss";
@import "./styles/mixins.wxss";

这样既避免重复引入，又保证样式优先级可控。如果在页面 wxss 中再 @import 同一个文件，可能引发样式叠加或覆盖混乱。

Wechat MP Article Stats Comments Suite - 微信公众号管理套件

公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。

下载

@import 的路径解析规则和常见报错

微信开发者工具对路径非常敏感，以下情况会直接报错或失效：

• @import "styles/base.wxss" → 报错 Cannot find module 'styles/base.wxss'（缺少 ./ 或 ../）
• @import "/styles/base.wxss" → 编译通过但不生效（绝对路径在 wxss 中被忽略）
• @import "base.css" → 不报错但无效（只认 .wxss 后缀）
• 被 import 的文件里再嵌套 @import 超过 5 层 → 可能触发编译器限制，样式丢失

调试建议：打开「详情 → 本地设置 → 勾选“增强编译”」，能提前暴露路径错误；同时检查控制台是否有 Failed to load resource 类似提示。

组件内使用 @import 需要注意隔离性

自定义组件默认启用样式隔离（styleIsolation: "isolated"），此时组件内部的 @import 只作用于该组件，不会影响页面或其他组件 —— 这是优点，但也意味着你不能靠组件里的 @import “偷偷”注入全局样式。

如果组件需要复用某套工具类（比如 .flex-center），推荐两种做法：

• 在组件 wxss 中显式 @import "./utils.wxss"（路径相对于组件根目录）
• 把工具类提至 app.wxss，并在组件 js 中设置 styleIsolation: "apply-shared"（仅当真需共享时才用，否则破坏封装）

别忘了：组件中 @import 的文件，不能引用 app.wxss 中定义的 CSS 变量（var(--primary-color)），因为作用域不穿透。

实际项目里，最容易被忽略的是路径层级错位和样式隔离导致的“明明写了却没效果”。多花十秒确认 ./ 和文件后缀，比反复刷新调试快得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！