微信小程序wxss的@import仅支持本地相对路径的.wxss文件，后缀错误、路径错误或格式错误均静默失效；需将第三方css转为wxss并适配限制（如rem→rpx、删@media、展开变量等），推荐在app.wxss顶格引入统一管理。
小程序不能直接引入外部 CSS 文件，@import 只认本地 .wxss 文件，且路径、语法、嵌套层级稍有偏差就会静默失效——不是报错，而是样式根本没加载。
为什么 @import "xxx.css" 会失效
微信小程序的 WXSS 编译器在解析 @import 时，只接受以 .wxss 为后缀的**本地相对路径**。写 @import "bootstrap.css" 或 @import "https://cdn.example.com/xxx.css" 都不会报错，但也不会加载任何样式。
-
@import "style.css"→ 后缀不对，忽略 -
@import "/common/base.wxss"→ 绝对路径，静默跳过 -
@import "node_modules/weui-wxss/dist/style/weui.wxss"→ 包路径不识别，除非该路径真实存在于项目目录中（比如通过 npm 构建后已拷贝进miniprogram_npm/） - 哪怕多一个空格、BOM 字符或注释在
@import前，整行都会被跳过
怎么把第三方 CSS 改成可用的 wxss
改后缀只是第一步，关键得适配 WXSS 限制。例如 bootstrap.css 直接改名成 bootstrap.wxss 仍会大量失效。
- 删掉所有
@media规则（小程序不支持响应式媒体查询） - 把
rem全部替换为rpx（小程序无根字体基准，rem无效）；保留1px边框等需物理像素的场景 - 去掉
calc()表达式，手动算好值再填入 - CSS 变量（
var(--color)）必须展开为具体值，WXSS 基础库 2.25.2+ 才有限支持 - 伪元素写法统一用
:before/:after（::before不支持） - 检查选择器：避免
[type="button"]这类属性选择器，部分变体不兼容
如何安全地在 app.wxss 中统一引入公共样式
最稳的方式是让 app.wxss 成为唯一入口，避免页面级重复 @import 导致权重混乱或样式叠加。
- 把裁剪转换后的
reset.wxss、utils.wxss等放在common/目录下（与app.wxss同级） - 在
app.wxss**顶格第一行**写：@import "common/reset.wxss";（注意没有./或../） - 不要在页面
index.wxss里再@import同一份文件，否则可能因层叠顺序引发意外覆盖 - 若用了
weui-wxss，确认它已通过npm install并构建到miniprogram_npm/weui-wxss/dist/style/weui.wxss，再写进app.wxss
组件内引入公共 wxss 的注意事项
自定义组件的 .wxss 文件同样支持 @import，但受样式隔离限制——引入的样式无法穿透作用域影响父页面或其他组件。
- 路径仍须相对，比如组件在
components/button/button.wxss，要引入common/mixins.wxss，就得写：@import "../../common/mixins.wxss"; - 组件内
@import的文件，不能自己再嵌套@import（WXSS 编译器只解析第一层） - 如果组件设置了
styleIsolation: "isolated"（默认），那么app.wxss里的样式也不会影响该组件内部节点 - 图标字体（如 iconfont）需额外处理：
@font-face的src必须指向本地.ttf文件，且路径要写对（通常放fonts/目录下）
真正容易被忽略的点是：WXSS 的 @import 不是“加载”，而是“文本拼接”——它把目标文件内容原样插入到当前位置。一旦路径错、后缀错、格式错，就什么都不会发生，连控制台都看不到提示。调试时务必打开开发者工具「样式」面板，逐个检查规则是否真的出现在最终样式表里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
