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

Adrien 发表于 Dev

阿德里安

我想在我的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的标题中。使用Webpack和PostCss工具（PurgeCss）。在首页折叠的上方，我可以获得非常紧凑的CSS。

其余的CSS与常用的pack助手异步加载

更新1

这是我通过回答写的文章的链接。

莱扎德·金（Lyzard Kyng）

让我们考虑一下 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在config/webpacker.yml
Exec的rake webpacker:compile改变这些后.css和/或.js文件。或webpack-dev-server用于热模块更换之类的事情
打开（尽管这是默认的开发设置）config.public_file_server.enabled = true（如注释中提到的@Adrien），以便.js通过puma