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

【问题标题】：How to inject CSS into javascript file while compiling es2015 library编译 es2015 库时如何将 CSS 注入 javascript 文件
【发布时间】：2019-04-08 08:48:36
【问题描述】：

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

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

我不能这样做，因为它应该是一个没有任何 css 等的编译后的 javascript 库，所以用户应该只导入一个 js 文件，而不需要将 css 复制/包含到他们的 html 中。

我不能使用 Styled Component 或 JSS 等，因为我不想重写第三方组件的整个代码来将所有必要的类插入到标签中。

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

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

感谢您的帮助

【问题讨论】：

标签： javascript css ecmascript-6 babeljs

【解决方案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>

【讨论】：

嗨@Cryptopat。感谢您的建议。您的提示让我知道如何轻松解决此问题。我将 CSS 代码像字符串一样放入 js 文件中，并将这些字符串导入到我的组件中。然后我使用 react-helmet 来控制这些样式，因为当我们移动到下一页时，它们应该从头部移除。不幸的是，我没有管理如何通过 babel 像字符串一样导入 CSS 文件，所以我只是手动完成了它，但是我不喜欢这种方式。尝试使用 transform-css-import-to-string 但它不起作用。可能是因为我在通过 babel 开发和编译时运行 webpack。