将 CSS 文件作为字符串导入以在 iframe 的 <head> 中使用

Importing CSS file as string to use inside <head> of an iframe

我正在尝试以编程方式将样式表添加到我的 Vue 组件中 iframe 的头部。

但是,当我使用 import 语句引用我的样式表时,它成为编译包的一部分。 (由于 webpack 设置)我不能在我的代码中将它作为变量引用,所以我不能将它附加到 iframe。

我想修改 vue.config.js 以便它测试单个文件名并允许我在代码中将该文件作为纯字符串导入。

我尝试过向 vue.config.js 添加一个新的加载程序,但我无法真正让它工作。

我导入 CSS 文件,它 returns {},但我希望它 return 是一个纯字符串。

后来我发现 Webpack 提供了 raw-loader,它允许我通过在文件路径前加上 '!!raw-loader!' 来简单地将文件导入为原始文本文件。

像这样:import normalize from "!!raw-loader!@/assets/normalize.css"