Question

我正在使用一些React UI库，我想使用一些第三方组件，例如我自己的可配置组件的基础。

此第三方组件要求将样式文件包含到HTML中（default.css和theme.css）

我不能这样做，因为它应该是一个没有任何CSS等的经过编译的javascript库。因此用户应该只导入一个js文件，而无需在其html中复制/包括css。

我不能使用样式化组件或JSS等，因为我不想重写thirparty组件的整个代码以将所有必需的类插入标记中。

所以我知道webpack可以从文件中提取样式，将其转换为字符串并插入HTML文档中，但是我不能这样做，因为webpack会创建一个巨大的大型编译文件，所以我使用的是Babel。

SO是否有可能从文件中提取CSS并将其转换为脚本，并且当用户导入此已编译的javascript组件时，该脚本应执行并将CSS插入HTML页面吗？

感谢您的帮助

Answer 1

不确定是否可以帮上忙，但是仅使用js，注入样式表如下。请注意template string的用法（反引号，不是强制性的，但在此更容易），样式将位于文档的底部，但这是adjustable as need。

const css = `
  body {background:red}
`

let link = document.createElement("style")
link.rel = "stylesheet"
link.type = "text/css"
link.textContent = css

document.body.appendChild(link)

<body>
</body>

编译es2015库时如何将CSS注入javascript文件

1 个答案: