如何使用 Webpacker 资产内联 CSS in Rails Header

Question

我想在我的 html 中插入一些 CSS。我过去曾用 Sprockets 将类似的东西放在我的 layouts/application.html.erb

中

<style>      
  <%= Rails.application.assets["application.css"].to_s.html_safe %>
</style>

现在我想做同样的事情，但是使用 Webpacker.

捆绑的 CSS 资产

我可以使用 Webpacker.manifest.lookup("application.css") 获取文件的路径，但我缺少获取内容并将其嵌入到布局中的最新部分

背后的原理：

为了提高页面速度，我想将我的关键 CSS 嵌入到 HTML 的 header 中。使用 Webpack 和 PostCss 工具 (PurgeCss)。我可以在主页的首屏上得到一个非常紧凑的 CSS。

CSS 的其余部分正在使用通常的包助手异步加载

更新 1

这是我写的文章的 link 感谢回答。

Answer 1

让我们考虑在 app/javascript/packs/application.js

中加入一行

import `../css/application.css'

和一个包含一些有用内容的文件 app/javascript/css/application.css。

然后你拼

<style>
  <%= File.read(File.join(Rails.root, 'public', Webpacker.manifest.lookup('application.css'))).html_safe %>
</style>

而且它很管用。

别忘了：

extract_css: true

在更改这些 .css and/or .js 文件后执行 rake webpacker:compile。或者使用 webpack-dev-server 来表示 Hot Module Replacement
打开（尽管这是开发的默认设置）config.public_file_server.enabled = true（如@Adrien 在评论中提到的那样）为 .js 资源提供服务 puma

How to inline CSS in Rails Header with Webpacker assets