微信小程序不支持直接 import 外部 CSS 文件，因 .wxss 仅支持本地相对路径的 .wxss 文件，且不兼容 @media、CSS 变量、calc()、部分伪类及单位（如 rem/vh/vw），需手动裁剪转换为 wxss 并本地引入。
小程序直接 import 外部 CSS 文件会报错
微信小程序不支持直接 @import 以 .css 为后缀的外部样式文件，哪怕路径正确、服务器可访问，也会在编译阶段报 Invalid @import syntax 或运行时静默失效。这是因为小程序的样式系统基于 .wxss，其 @import 仅接受本地相对路径且必须是 .wxss 后缀的文件——它根本不解析远程 CSS 或非 wxss 后缀资源。
改后缀不是万能解法，关键在内容兼容性
把 bootstrap.css 改成 bootstrap.wxss 并不能让它直接跑起来。原因很实在：
-
.wxss不支持@media、@keyframes、CSS 变量（var(--color)）、calc()等 Web CSS 特性（基础版基础库 2.25.2+ 才开始有限支持部分） - 选择器限制：不支持
:host、::before/::after（伪元素需写成:before/:after），也不支持属性选择器如[type="button"]的某些变体 - 单位问题：
rem在小程序中无根字体基准，vh/vw表现不稳定，建议统一转为rpx或px - 第三方库常依赖 DOM 结构和 JS 行为（比如 Bootstrap 的 dropdown 需要 JS 初始化），光有样式没用
真正可行的引入方式：手动裁剪 + 转换 + 本地化
如果你确实只需要某几个组件样式（比如按钮、卡片、栅格），推荐走“最小可用”路径：
- 下载原始
.css文件（如normalize.css或某个 UI 库的 dist 目录下精简版） - 用编辑器批量替换：
rem → rpx、px → rpx（注意保留 1px 边框等需要真实像素的场景）、删掉所有@media块（或只留@media (max-width: ...)并手动转成响应式 rpx 值） - 将文件保存为
your-lib.wxss，放在项目common/或style/目录下 - 在页面或组件的
.wxss中写：@import "../style/your-lib.wxss";（路径必须是相对路径，且不能以/开头） - 检查开发者工具「样式」面板，确认规则已加载并生效；若无效，右键「重新编译」或清缓存
更省事但受控的选择：用已适配的小程序 UI 库
像 weui-wxss、miniprogram-element、nutui-taro（Taro 项目）这类库，本身就是按 wxss 规范写的，开箱即用：
-
weui-wxss：官方推荐，纯样式，无 JS，直接npm install weui-wxss后拷dist/style/weui.wxss到项目里@import - 避免用
unpkg.com/xxx.css这类 CDN 链接——小程序不支持跨域 import，且无法离线打包 - 如果用了构建工具（如 webpack + mini-program-webpack-plugin），可通过 loader 把 CSS 转成 wxss 再注入，但这需要配置 postcss 插件链，对新手容易翻车
别指望“改个后缀就完事”，小程序样式系统的边界比想象中窄。真正卡住的往往不是 import 语法，而是 CSS 特性被截断后，样式逻辑直接崩掉——动手前先打开目标 CSS 文件，搜一遍 @media、var(、calc( 和伪类，心里就有数了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
