如何在打字稿中为内联 css 声明文件？

Question

我想针对 google 页面速度和 100/100 分数优化网站，我需要声明 css 内联。我知道我可以这样声明 css 内联：

工作示例

page.headerData {
  10 = TEXT
  10.wrap = <style>|</style>
  10.value (
      .example{color:#123}
  )
}

但我不喜欢这种方式，我想声明一个文件并加载该文件的内容，而不是为了更好的维护，例如：

伪代码

page.headerData {
  10 = TEXT
  10.wrap = <style>|</style>
  10.value < {$publicMedia}Css/inline.css
}

inline.css

* {
  margin:0;
  padding:0;
}
.example {
  color:#123;
}

期望输出

<!DOCTYPE html>
<html lang="en">
<head>
...
  <style>
    * {
      margin:0;
      padding:0;
    }
    .example {
      color:#123;
    }
  </style>
</head>
...

有办法吗？ :)

Answer 1

我认为没有办法在 ts 中内联外部 css 文件。但是有两个解决方法。

使用外部 ts 文件并将其包含到您的默认 ts 中： <INCLUDE_TYPOSCRIPT:source="file:fileadmin/templates/ts/myinlinestyles.ts">
在您的外部 ts 文件中，您可以正常工作。
page.headerData { 10 = TEXT 10.wrap = <style>|</style> 10.value ( .example{color:#123} ) }
使用流体模板。

此外，您的值声明拼写错误（= 而不是 <）。
< 表示对象复制。 See TypoScript syntax.

Google 说 "only use for small Resources"。正如您在链接页面上看到的那样，内联方法有一些限制，例如可缓存性。重要的是你应该 minimize/compress 并连接你的 CSS-/JS-files。 TYPO3 对此有一个很好的解决方案。请查看 TYPO3-Documentation - section setup->config 并搜索 compressCss 和 concatenateCss。

Answer 2

在当代版本的 TYPO3（9.5 LTS 和更新版本）中只需使用

page {
  includeCSS {
    file = PATH_TO_FILE
    file.inline = 1
  }
}

结果是文件的嵌入内容，包含在样式标签中。

如何在打字稿中为内联 css 声明文件？

How can I declare a file for inline css in typoscript?

typoscript

typo3-6.2.x