从目录中导入 Css 文件以注入 iframe 头标签，如 <style> Vite + React JS

Question

欢迎来到我的*****问题

我花了几天时间试图解决一些问题。

我正在尝试用GrapesJS、ReactJS和Vite创建一个网页编辑器，一切都很美妙，直到创建不同主题的王国出现。。。

主题在不同的插件中，这些插件在从react应用程序运行的项目中，我的问题是当我试图在插件的目录中加载css文件时：

import styles from "../../dist/main.css";
const cssStyle = document.createElement("style");
cssStyle.innerHTML =  styles ;
const doc = iframe.contentDocument;
const f = setInterval(() => {
if (doc.readyState === "complete") {
doc.head.appendChild(cssStyle);
clearInterval(f);
}
}, 100);

这些样式在我的react应用程序中全局应用，我只想在head标记中的iframe中注入。

有没有办法在react中加载css文件而不全局编译这个css文件？

感谢的帮助

Answer 1

Vite在import.CSS文件时自动将CSS样式注入页面。很有帮助。。。直到它不是。根据你的描述，我敢打赌那就是罪魁祸首。

有一种方法可以禁用这种行为：看起来将?inline添加到文件名将禁用注入，只获取文件内容。所以你的第一行应该是这样的：

import styles from "../../dist/main.css?inline";

应该将styles作为一个纯字符串，然后代码的其余部分应该可以工作。

第页。S.欢迎使用StackExchange：(