css - Scala.js - 将 css 文件的内容注入(inject)内联 <style> 标签

Question

我正在尝试构建一个网络应用程序(在 Scala.js 和 ScalaReact 中)，它将作为一个独立的小部件添加到一个更大的网络应用程序中，我无法控制(无法将内容写入标签) ).

我的应用程序将包含一些具有不同 CSS 样式的页面，但也包含一组通用样式，这些样式需要与小部件一起加载。

我唯一的选择是动态添加内联标签，但我找不到一种方法来读取 CSS 文件的内容并在编译时将其转储到标签中。

我试过使用 ScalaCSS，它可以解决这个问题，但它的 DSL 不完整，甚至不能满足我的要求。

我怎样才能欺骗 Scala.js 生成包含从本地 CSS 文件中获取的内容的标签？

Answer 1

使用 sbt 的帮助生成一个包含 CSS 文件作为字符串文字的对象可能是最简单的:

sourceGenerators in Compile <+= Def.task {
  val sourceFile = ???  // path to your file
  val targetFile = (sourceManaged in Compile).value / "CssHolder.scala"
  val css = IO.read(sourceFile).replaceAllLiterally("$", "$$")
  val scalaCode =
    s"""object CssHolder { final val css = raw\"\"\"$css\"\"\" } """

  IO.write(targetFile, scalaCode)

  Seq(targetFile)
}

现在在你的代码中，你可以简单地引用CssHolder.css并将其放入 <style> 中标签。请注意，大多数 IDE 会提示这一点，因为它们不了解源代码生成器。