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

【问题标题】：How can I declare a file for inline css in typoscript?如何在打字稿中为内联 css 声明文件？
【发布时间】：2021-12-03 19:02:05
【问题描述】：

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

工作示例

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>
...

有没有办法做到这一点？ :)

【问题讨论】：

标签： typoscript typo3-6.2.x

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我认为没有办法在 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 说“仅用于小资源”。正如您在链接页面上看到的那样，内联方法有一些限制，例如可缓存性。重要的是您应该最小化/压缩和连接您的 CSS-/JS-文件。 TYPO3 对此有一个很好的解决方案。请查看 TYPO3-Documentation - section setup->config 并搜索 compressCss 和 concatenateCss。

【讨论】：

是的，我知道第二个打字稿不起作用，它更像是一个伪代码示例。但是如果我使用您的代码，那么他只会在头部添加一个链接，而不是内联 css 还是我错了？所以你的代码就像已经存在的“includeCSS”，但我想在样式标签中内联css。这样 css 文件的内容将呈现在样式标记中，而不是作为样式表的链接。
好的，谢谢，但是您的解决方法对我来说毫无意义，因为您的第一个解决方法只包含一个外部 ts 文件，但这绝对不是我想要的，您的第二个解决方法与我认为这个问题，因为我只想知道如何将样式表文件的内容添加到打字稿对象中。当然，我会用流体渲染整体，但这不是问题。我也更新了我的问题，希望现在更清楚。
正如您在我的回答中看到的那样，没有办法做您想做的事。还有Google 说“仅用于小资源”。正如您在链接页面上看到的那样，内联方法有一些限制，例如可缓存性。请看我的增强答案。
感谢您的回复。我想我不能只用 TypoScript 处理这种情况，但也许用 php 和用户函数是可能的，因为用 php 我可以加载文件的内容，所以我会试试这个。我已经知道所有这些东西，如 html、css、js 压缩和连接，我已经获得了 97/100 的页面分数，但我想要一个 100/100 的良好维护解决方案，是的，我不加载整个 css 内联，只是“首屏”CSS。