来自资产管道的内联 CSS答案

【问题标题】：Inline CSS from the asset pipeline来自资产管道的内联 CSS
【发布时间】：2015-10-21 22:44:51
【问题描述】：

一个新的 Rails 应用程序在 app/views/layouts/application.html.erb 中包含以下代码，以包含指向 - 生产中 - 缩小的 CSS 的链接：

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>

出于 WebPerformance 的原因，我想使用资产管道来缩小和组织我的 CSS，但将其内联在标题中。

我如何告诉 Rails 在 application.html.erb 中内联资产管道的 CSS？

【问题讨论】：

查看 AMP 规范及其 Github，看起来页面加载速度优势的一个主要组成部分是通过在 AMP 页面上内联样式来完全消除 CSS 加载。看起来您将在整个代码中内联 CSS sn-ps 并完全消除资产管道的 CSS 部分，而不是将其包装在 AMP 中——这似乎违背了 AMP 的目的，即完全消除 CSS文件加载时间。通过快速评估，我建议创建一个 Rails 引擎来托管您的 AMP 页面，并从引擎中省略资产管道。

【解决方案1】：

这段代码可以解决问题：

<style>
  <% css = File.read("#{Rails.root}/public#{asset_path("application", type: :stylesheet)}") %>
  <%= css.html_safe %>
</style>

【讨论】：