@import在小程序中常因位置和路径错误失效：必须置于文件最顶部、仅支持相对路径（如./../../styles/common.wxss），不支持绝对路径或嵌套导入；推荐将公共样式统一注入app.wxss以规避问题。
为什么 @import 在小程序里经常不生效
小程序的 WXSS 加载机制和 Web 的 CSS 不同：@import 只支持相对路径，且**必须写在文件开头、其他样式规则之前**。一旦前面有注释、空行或任何样式声明（哪怕是一条 /**/），后续的 @import 就会被忽略，但不会报错——这是最常被忽略的失效原因。
常见错误现象包括：公共样式里的 .btn-primary 在页面中没效果、颜色/尺寸没覆盖、开发者工具里看不到导入的规则。
-
@import路径必须以./或../开头，不能用绝对路径（如/styles/base.wxss） - 不支持嵌套
@import（A.wxss 导入 B.wxss，B.wxss 再导入 C.wxss → C 不会加载） - 多个
@import语句之间不能有空行或注释
正确的 @import 写法和路径处理
假设你的公共样式放在 app.wxss 同级的 styles/common.wxss，想在 pages/index/index.wxss 中复用：
@import "./../../styles/common.wxss";
/* ✅ 正确：路径相对于当前文件，且位于最顶部 */
.container { padding: 20rpx; }
注意路径计算逻辑：从 pages/index/index.wxss 出发，向上两级到项目根目录，再进 styles/。如果路径写成 @import "/styles/common.wxss" 或 @import "styles/common.wxss"，都会静默失败。
- 推荐统一把公共样式放
styles/目录下，所有页面/组件都用./../../styles/xxx.wxss形式导入 - 避免跨多层引用（如从 components/a/b/c.wxss 导入 styles/…），路径易出错，可考虑用
project.config.json配置 alias（但原生小程序不支持，需构建工具辅助）
替代方案：用 app.wxss 全局注入更稳妥
如果只是复用基础重置、工具类、颜色变量等，直接写进 app.wxss 是最简单可靠的方式。小程序会自动将 app.wxss 里的样式注入到所有页面，无需每个文件手动 @import。
例如，在 app.wxss 里写：
/* app.wxss */ @import "./styles/reset.wxss"; @import "./styles/utils.wxss"; @import "./styles/variables.wxss";
这样既避免分散管理，又规避了单个页面导入遗漏或路径错误的问题。但要注意：全局样式可能造成意外覆盖，比如 .text 这种泛命名容易污染子组件。
- 适合导入：颜色变量（
--primary-color）、字体大小映射（.fs-12）、重置样式（button::after）、工具类（.flex-center） - 不适合导入：页面专属布局类、组件内部样式（应封装在组件 wxss 内）
调试 @import 是否成功的小技巧
开发者工具里看不出 @import 是否加载成功？可以临时加一条「探针样式」来验证：
@import "./../../styles/common.wxss";
/* 在 common.wxss 最末尾加一句：*/
.test-import { position: fixed; top: -9999px; width: 1px; }
然后在对应页面 WXML 中加一个 @import 失败；如果渲染了但样式无效，说明路径对但内容没生效（比如被其他样式覆盖）。
另一个信号是：在开发者工具「调试器 → Styles」面板中，点击某个元素，看右侧样式列表顶部是否出现你导入的 wxss 文件名。没有出现，基本就是路径或位置问题。
真正麻烦的不是不会写 @import，而是它失败时不提示、不报错、也不警告——得靠这种“土办法”才能确认它到底有没有干活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
