微信小程序不支持 import 远程 WXSS，仅允许相对路径本地导入；可内联 style、npm 包注入或动态插入（仅限调试），但须转换单位为 rpx、移除 CSS 变量及不兼容属性。
微信小程序不支持直接 import 外部 WXSS 文件
微信小程序的 @import 仅支持相对路径，且必须是同一项目内的本地文件（如 @import "./common.wxss"），不能加载 CDN 或远程 URL（如 @import "https://cdn.example.com/style.wxss"）。尝试这样做会直接报错：WXSS Import path must be relative，构建阶段就失败。
用 style 标签内联引入第三方样式（适用于小量 CSS）
如果只是想复用某段通用样式（比如 Normalize、重置样式或一段工具类），可将内容复制进页面或组件的 <style> 块中。注意：需手动处理单位转换（小程序不支持 rem、vh 等非 rpx/px 单位）、移除不兼容属性（如 filter、backdrop-filter），并避免使用 CSS 变量（--color-primary）——小程序不支持运行时解析 CSS 自定义属性。
- 适合场景：引入几行 reset、颜色变量定义、基础 flex 工具类
- 不推荐用于完整 UI 框架（如 Tailwind、Bootstrap），体积大且兼容性差
- 记得把
px手动转为rpx（如16px → 32rpx，按 750 设计稿基准）
通过 npm 包管理 + 构建插件注入全局样式（推荐方案）
微信开发者工具支持 npm 构建，可将外部 WXSS 封装为 npm 包，再在 app.wxss 中 @import。关键前提是：该包必须提供已预处理为合法 WXSS 的文件（无 CSS 变量、无非法单位、路径全为相对引用）。
- 步骤：执行
npm init→ 创建index.wxss→ 发布到私有/公开 registry → 在项目中npm install your-wxss-pkg→ 在app.wxss中写@import "/miniprogram_npm/your-wxss-pkg/index.wxss"; - 常见坑：
miniprogram_npm路径必须带前导斜杠；包内不能含@import绝对路径或网络地址 - 性能影响：所有页面都会加载该样式，建议只放真正全局需要的规则
动态插入 style 标签（仅限调试，禁止上线）
开发阶段临时验证样式效果可用 JS 注入，但微信小程序运行时禁止操作 document.head，所以只能在自定义组件的 attached 生命周期里向组件根节点插入 <style>：
Component({
attached() {
const style = document.createElement('style')
style.textContent = '.btn { color: red; }'
this.root.appendChild(style)
}
})
⚠️ 这种方式绕过编译校验，无法热更新，样式作用域混乱，且真机可能因沙箱限制失效。仅作快速原型验证，上线前必须移除。
真正稳定的做法始终是走构建流程：把外部样式转成小程序友好的 WXSS，再通过 @import 或 npm 引入。最易被忽略的是单位转换和 CSS 特性降级——哪怕一行 aspect-ratio: 1/1 都会让整个 WXSS 加载失败。
