Question

我正在尝试构建一个Web应用程序（在Scala.js和ScalaReact中），它将作为一个自包含的小部件添加到一个更大的Web应用程序中，我无法控制（无法在标签中写入内容））。

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA ;

如何欺骗Scala.js生成包含从本地CSS文件中获取内容的标签？

＆＃xA;

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会抱怨这一点，因为他们不了解源生成器。

Scala.js - 将css文件的内容注入内联<style>标记

1 个答案: