非HTTP环境下link标签失效时，应改用JavaScript动态注入内联style标签，并根据不同环境（Node.js、Electron、WebView等）选择对应读取CSS内容的方式，确保样式可靠生效。
非HTTP环境里 link 标签失效怎么办
浏览器在 file:// 协议、Electron 渲染进程、WebView（如 Cordova/React Native WebView）、或某些沙箱化 Server-Side Render（如 Node.js 生成静态 HTML）中，<link rel="stylesheet" href="style.css"> 往往会因跨协议限制或路径解析失败而静默失败——不是报错，是压根不加载。
根本原因：CSS 文件的 href 被当作网络资源处理，而 file:// 下相对路径解析规则与 HTTP 不同，且现代浏览器对 file:// 的 CORS 和样式注入有额外限制。
- Electron 中默认禁用
file://的 CSS 加载（需显式启用webPreferences.webSecurity: false，但不推荐） - Node.js 模板渲染（如 EJS、Handlebars）中，
link标签只是字符串，不会触发真实请求——它依赖客户端后续加载，而客户端可能根本没网络或协议受限 - WebView 中 Android/iOS 对本地
file:///android_asset/或bundle://路径支持不一致，link容易 404
用 JavaScript 动态注入 <style></style> 内联样式最可靠
绕过协议限制的通用解法：把 CSS 内容读出来，创建 <style></style> 标签并 appendChild 到 document.head。关键不在“怎么加”，而在“怎么读”。
不同环境读取方式差异大：
立即学习“Java免费学习笔记（深入）”；
-
Node.js 环境（SSR / 静态生成）：用
fs.readFileSync('./style.css', 'utf8')读取文件内容，拼进 HTML 字符串或注入到document（若用 JSDOM） -
Electron 渲染进程：优先用
require('fs').readFileSync（需nodeIntegration: true），或预加载脚本中读取后传给渲染进程；避免直接fetch('file://...')（受安全策略拦截） -
WebView（如 Capacitor）：CSS 文件应放在
public/或www/目录下，用fetch('./style.css')—— 此时实际走的是http://localhost或capacitor://协议，不是file:// -
纯
file://打开 HTML：只能用内联写死或 base64 编码后内联（见下条）
内联 CSS 的三种实操路径与取舍
目标是让样式“不依赖外部请求”，核心就一条：CSS 内容必须以字符串形式出现在 HTML 或 JS 中。
-
硬编码
<style></style>标签：适合小项目或构建后固定样式，直接把编译好的dist/style.css内容粘贴进 HTML 的<style></style>块里。缺点是无法热更新，维护成本高 -
构建时内联（推荐）：Webpack/Vite 插件如
vite-plugin-css-injected-by-js或自定义 Rollup 插件，在打包时把 CSS 提取为 JS 字符串并自动注入document.head；Vite 用户可配build.rollupOptions.output.inlineDynamicImports = true配合插件 -
base64 内联（仅限小 CSS）：把 CSS 文件转成 base64 字符串，写成
<link href="data:text/css;base64,...>%E3%80%82%E6%B3%A8%E6%84%8F%EF%BC%9AIE%20%E4%B8%8D%E6%94%AF%E6%8C%81%EF%BC%8C%E4%B8%94%E8%BF%87%E9%95%BF%E4%BC%9A%E5%AF%BC%E8%87%B4%20URL%20%E6%88%AA%E6%96%AD%E6%88%96%E5%86%85%E5%AD%98%E5%8E%8B%E5%8A%9B%EF%BC%9B%E5%8F%AA%E9%80%82%E5%90%88%E5%87%A0%20KB%20%E4%BB%A5%E5%86%85%E7%9A%84%E9%87%8D%E7%BD%AE%E6%A0%B7%E5%BC%8F%E6%88%96%E4%B8%BB%E9%A2%98%E8%89%B2
Server-Side%20%E6%B3%A8%E5%85%A5%E8%A6%81%E6%B3%A8%E6%84%8F%E5%AD%97%E7%AC%A6%E8%BD%AC%E4%B9%89%E5%92%8C%E6%97%B6%E6%9C%BA
Node.js%20%E6%A8%A1%E6%9D%BF%E4%B8%AD%E7%9B%B4%E6%8E%A5%E6%8B%BC%E6%8E%A5%20CSS%20%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E6%9C%80%E5%AE%B9%E6%98%93%E5%87%BA%E9%97%AE%E9%A2%98%E7%9A%84%E6%98%AF%E5%BC%95%E5%8F%B7%E3%80%81%E6%8D%A2%E8%A1%8C%E3%80%81<%20%E7%AC%A6%E5%8F%B7%E8%A2%AB%20HTML%20%E8%A7%A3%E6%9E%90%E5%99%A8%E8%AF%AF%E5%88%A4%E3%80%82
- %E7%94%A8%20
escapeHtml(cssString)%EF%BC%88%E5%A6%82%20he.escape()%EF%BC%89%E6%88%96%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E8%87%AA%E5%B8%A6%E8%BD%AC%E4%B9%89%EF%BC%88EJS%20%E7%9A%84%20<%=%20%>%20%E9%BB%98%E8%AE%A4%E8%BD%AC%E4%B9%89%EF%BC%8C%E8%A6%81%E7%94%A8%20<%-%20%>%20%E8%BE%93%E5%87%BA%E6%9C%AA%E8%BD%AC%E4%B9%89%E5%86%85%E5%AE%B9%EF%BC%89 - %E7%A1%AE%E4%BF%9D%E6%B3%A8%E5%85%A5%E7%82%B9%E5%9C%A8%20
<head>%20%E9%87%8C%EF%BC%8C%E4%B8%94%E5%9C%A8%E4%BB%BB%E4%BD%95%E4%BE%9D%E8%B5%96%E6%A0%B7%E5%BC%8F%E7%9A%84%20DOM%20%E6%B8%B2%E6%9F%93%E4%B9%8B%E5%89%8D%EF%BC%9BSSR%20%E5%9C%BA%E6%99%AF%E4%B8%8B%EF%BC%8C%E8%8B%A5%E7%94%A8%20React/Vue%EF%BC%8C%E6%A0%B7%E5%BC%8F%E5%BF%85%E9%A1%BB%E5%9C%A8%E9%A6%96%E6%AC%A1%20renderToString%20%E5%89%8D%E5%AE%8C%E6%88%90%E6%B3%A8%E5%85%A5%EF%BC%8C%E5%90%A6%E5%88%99%E9%A6%96%E5%B1%8F%E6%97%A0%E6%A0%B7%E5%BC%8F - %E8%8B%A5%20CSS%20%E5%90%AB%20
@import%20%E6%88%96%E5%AD%97%E4%BD%93%20url()%EF%BC%8C%E8%BF%99%E4%BA%9B%E5%AD%90%E8%B5%84%E6%BA%90%E4%BB%8D%E8%B5%B0%20HTTP/HTTPS%20%E8%AF%B7%E6%B1%82%E2%80%94%E2%80%94%E9%99%A4%E9%9D%9E%E4%BD%A0%E6%8A%8A%E5%AE%83%E4%BB%AC%E4%B9%9F%E8%BD%AC%E6%88%90%20data%20URI%20%E6%88%96%E4%B8%80%E5%B9%B6%E5%86%85%E8%81%94
%E7%9C%9F%E6%AD%A3%E9%BA%BB%E7%83%A6%E7%9A%84%E4%BB%8E%E6%9D%A5%E4%B8%8D%E6%98%AF%E2%80%9C%E6%80%8E%E4%B9%88%E5%8A%A0%E6%A0%B7%E5%BC%8F%E2%80%9D%EF%BC%8C%E8%80%8C%E6%98%AF%E2%80%9C%E5%8A%A0%E5%AE%8C%E4%B9%8B%E5%90%8E%E6%A0%B7%E5%BC%8F%E6%98%AF%E5%90%A6%E7%9C%9F%E7%9A%84%E7%94%9F%E6%95%88%E4%BA%8E%E6%89%80%E6%9C%89%E5%85%83%E7%B4%A0%E3%80%81%E6%89%80%E6%9C%89%E7%8E%AF%E5%A2%83%E3%80%81%E6%89%80%E6%9C%89%E9%A6%96%E6%AC%A1%E6%B8%B2%E6%9F%93%E6%97%B6%E6%9C%BA%E2%80%9D%E3%80%82%E5%B0%A4%E5%85%B6%E5%BD%93%E6%B6%89%E5%8F%8A%E5%AD%97%E4%BD%93%E3%80%81%E4%BC%AA%E7%B1%BB%E3%80%81%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2%E6%88%96%20Shadow%20DOM%20%E6%97%B6%EF%BC%8C%E5%86%85%E8%81%94%E5%90%8E%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E4%BC%98%E5%85%88%E7%BA%A7%E5%AE%B9%E6%98%93%E6%84%8F%E5%A4%96%E5%8F%98%E5%8C%96%E3%80%82">
