如何提取本地CSS文件内容并注入到<style>标签中？

已知可以通过style.innerHTML直接写入CSS代码到动态创建的<style>标签，示例代码如下：

let style = document.createElement("style");
style.setAttribute("id", "raptors");
style.innerHTML =
  ".puma {" +
  "color: purple;" +
  "font-size: 50px;" +
  "text-align: left;" +
  "}";

但希望直接从本地文件（如./styles.css）导入样式内容，而非手动编写CSS代码，尝试过fetch方案但未成功，以下是几种可行解决方案：

方案1：修复Fetch实现逻辑 #

你的fetch核心逻辑没问题，大概率是未将创建的<style>标签添加到DOM，或文件路径不正确。修正后的代码：

let style = document.createElement("style");
style.setAttribute("id", "test");
// 必须将style标签添加到DOM，样式才会生效
document.head.appendChild(style);

async function loadCss() {
  try {
    // 确认路径正确性：框架项目需将CSS放在public目录，纯静态项目确保相对路径正确
    const response = await fetch("./style.css");
    if (!response.ok) throw new Error(`请求失败：${response.status}`);
    const css = await response.text();
    style.textContent = css;
  } catch (error) {
    console.error("加载CSS失败：", error);
  }
}
loadCss();

方案2：ES模块导入CSS（现代前端环境） #

若项目支持ES模块（通过type="module"引入脚本），可直接导入CSS文件：

原生浏览器支持方式 #

// 先给HTML中的脚本添加type="module"：<script type="module" src="your-script.js"></script>
async function loadCssFromModule() {
  try {
    const cssModule = await import("./style.css", { assert: { type: "css" } });
    const styleSheet = cssModule.default;
    document.head.appendChild(styleSheet);
  } catch (error) {
    console.error("加载CSS模块失败：", error);
  }
}
loadCssFromModule();

打包工具适配方式（Vite/Webpack） #

// Vite中用?raw获取原始文本，Webpack需配置raw-loader
import cssText from "./style.css?raw";

const style = document.createElement("style");
style.textContent = cssText;
document.head.appendChild(style);

方案3：动态创建<link>标签替代<style> #

若无需将CSS内容写入<style>标签，直接用<link>引入本地CSS文件更简洁：

const link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", "./style.css");
link.setAttribute("id", "test-style");
document.head.appendChild(link);

// 监听加载状态
link.onload = () => console.log("CSS加载成功");
link.onerror = () => console.error("CSS加载失败");

内容的提问来源于stack exchange，提问作者Judoboy Alex