capacitor不处理css打包或注入，仅同步构建后的web资产；css是否包含及生效取决于前端构建工具，需确认其输出目录含css文件、路径为相对路径、webdir配置正确且sync日志显示复制成功。
Capacitor本身不处理CSS打包或注入，它只负责将构建后的Web资产（包括CSS）同步到原生项目中。真正决定CSS是否被包含、如何加载、是否生效的，是你的前端构建工具（如Vite、Webpack、Angular CLI等）——不是Capacitor配置。
确认CSS是否真的被打包进dist目录
这是最容易被忽略的第一步。Capacitor的capacitor copy或npx cap sync只会把www目录（即构建输出目录）里的文件复制过去。如果CSS没出现在dist/或www/里，Capacitor就根本“看不见”它。
- 运行构建命令（例如
vite build或ng build），然后手动检查输出目录下是否存在.css文件（如index.css、style.[hash].css） - 如果用的是Vite，默认会将CSS提取为单独文件；但若配置了
build.cssCodeSplit: false，CSS可能被内联进index.html的<style></style>标签里——这也算“被包含”，只是没独立文件 - 检查
index.html是否通过<link rel="stylesheet">正确引用了CSS路径，且该路径在构建后仍可解析（相对路径容易出错）
避免在index.html中使用绝对public路径
很多人把CSS放在public/目录下，然后在index.html里写<link href="/styles.css">。这在本地开发（Vite dev server）能工作，但构建后部署到Capacitor时会404——因为Capacitor加载的是file://协议，不走HTTP服务器，/指向的是设备根目录，不是应用资源根目录。
- 所有静态资源引用必须用相对路径，例如
<link href="styles.css">或<link href="./assets/main.css"> - 确保构建工具没有把CSS输出到子目录却没同步更新HTML中的
href（常见于自定义build.outDir或base配置） - Vite用户注意：
base配置影响所有资源路径。Capacitor要求base: "./"（默认值），不要设成"/"或"https://example.com/"
检查Capacitor同步是否覆盖了CSS文件
npx cap sync默认会清空android/app/src/main/assets/public/和ios/App/public/，再把www/内容复制进去。但如果www/里没有CSS，或者你误改了capacitor.config.json里的webDir指向错误目录，就会漏掉。
- 确认
capacitor.config.json中webDir字段值与实际构建输出目录一致（如"webDir": "dist"或"webDir": "www"） - 执行
npx cap sync --verbose，观察日志中是否列出CSS文件被复制（例如Copied www/styles.css → android/...） - Android真机调试时，可用
adb shell ls /data/data/com.yourapp/files/public/直接查看实际部署的文件列表
动态加载CSS时注意CSP与文件协议限制
如果你在JS里用document.createElement('link')动态插入CSS，或通过import('./theme.css')代码分割加载，在Capacitor中可能失败。
- Capacitor WebView默认启用严格CSP（Content Security Policy），禁止
eval和内联样式，也常拦截file://协议下的@import或字体请求 - 动态
fetch()加载CSS文本再insertRule可行，但无法加载@font-face或url()引用的资源（如背景图） - 最稳妥的方式：确保所有CSS在
index.html中静态声明，由构建工具统一处理路径与哈希
真正卡住人的往往不是Capacitor，而是构建工具对CSS的处理逻辑和路径配置是否与file://环境兼容。每次改完CSS相关配置，务必手动验证dist/内容 + npx cap sync --verbose日志 + 真机adb检查三者一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
