link rel="stylesheet"在混合app webview中常失效，因webview对file://协议缓存激进、忽略cache-control，且ios/android对css中url()及@import的路径解析基准不一致（android认assets根，ios认bundle root），应优先用js动态注入内联样式，或严格使用绝对路径加文件哈希防缓存。
link rel="stylesheet" 在混合 App 的 WebView 里大概率不生效，不是你写错了，是 WebView 对 file:// 协议的缓存和路径解析机制本身就不靠谱。直接用它加载本地 CSS，iOS 和 Android 表现分裂、改了文件看不到效果、图片 404 是常态。
为什么 link rel="stylesheet" 在 WebView 里经常挂掉
WebView（尤其 Android 系统 WebView 和 iOS WKWebView）在 file:// 场景下根本不管 Cache-Control，缓存策略激进到连修改时间戳都不校验；更麻烦的是，@import、url() 里的相对路径基准不是 CSS 文件位置，而是 HTML 页面的 location.href —— 而 file:// 页面没有标准 base URL，Android 默认以 assets 根为起点，iOS WKWebView 却可能指向 bundle root 或临时解压目录，结果就是路径错乱、资源 404。
用 JS 动态注入内联样式最稳
绕过所有路径和缓存问题，直接把 CSS 内容塞进 <style></style> 标签里追加到 document.head。开发期和线上都可靠，且能控制注入时机（比如等 DOM ready 后）。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- Android Java 示例：
webView.evaluateJavascript("const s = document.createElement('style'); s.textContent = `body { margin: 0; font-family: sans-serif; }`; document.head.appendChild(s);", null); - HarmonyOS ETS 示例：
this.webviewController.runJavaScript(`const style = document.createElement('style'); style.textContent = "${this.customStyle}"; document.head.appendChild(style)`); - 注意：CSS 字符串里不能有未转义的换行或
`，构建时建议用模板字符串 +JSON.stringify处理原始 CSS 内容
非要用 link 就必须绝对路径 + 哈希防缓存
如果已有大量 link 依赖没法改，至少得堵住两个漏洞：路径错乱和缓存 stale。
-
href必须写成完整绝对路径：file:///android_asset/css/app.css（Android）或file:///var/containers/Bundle/Application/xxx/www/css/app.css（iOS），绝不能用./css/app.css或css/app.css - 每次构建给 CSS 文件名加哈希，比如
app.a1b2c3.css，避免 WebView 拿到旧缓存 - 开发阶段手动干扰缓存：
link.href = "css/app.css?v=" + Date.now();
- Android 可强制关缓存：
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
url() 路径在 CSS 里总 404 怎么办
别指望相对路径自动解析对。WebView 解析 url("./images/icon.png") 时，根本不会看 CSS 文件在哪，而是按 HTML 页面 URL 推算——而 file:// 页面 URL 是个空壳。
- 所有
url()必须写成绝对路径：url("file:///android_asset/images/icon.png") - 字体、背景图、SVG 引用全都要这样处理，一个都不能漏
- 用 Vite/Webpack 构建时，确保
publicDir配置正确，并开启build.rollupOptions.output.manualChunks让资源路径可预测 - 调试时先
console.log(location.href)，再比对 Network 面板里实际请求的地址，差一毫秒都得修
真正难的不是写 CSS，而是让 WebView “信”你写的路径和缓存策略。动态注入是最小干预、最高兼容的解法；一旦选了 link，就得全程自己管路径、哈希、缓存开关，漏一个环节就白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
