如何在 Rails 部分中渲染 sass？答案

【问题标题】：How do I render sass in a rails partial?如何在 Rails 部分中渲染 sass？
【发布时间】：2014-08-25 07:55:33
【问题描述】：

我有一个 Rails 3.2 应用程序。我正在尝试部分渲染处理过的 sass 代码。

我添加了一个初始化器来处理 scss 文件：

ActionView::Template.register_template_handler :scss,
  Sass::Rails::ScssTemplate

我的 sass 文件名为 _style.scss，渲染调用如下所示：

<%= render partial: "./templates/default/style", formats: "css" %>

我收到以下错误：

undefined method `call' for Sass::Rails::ScssTemplate:Class

在我看来，Rails 似乎不知道如何处理 Sass 文件，但是，我的 application.css 文件中包含的任何 .scss 文件都已正确处理，因此，至少在这种情况下，我知道 sass 处理工作正常.我尝试了不同的扩展名和格式。在某些情况下，我可以获得要渲染的视图，但不处理 sass。

【问题讨论】：

你不应该做stylesheet_include_tag吗？
@GauravShah stylesheet_link_tag 会写一个链接，但是只有当文件在 assets 目录中并且我想从不同的位置加载它时，sass 才会被解析。（我现在正在考虑在资产管道之外解析 sass。）
正如在对类似问题的回答中指出的那样，在 Rails 部分中渲染 sass 并不是一个好主意。更好的方法是生成一次 css 代码，而不是每次都解析 sass 代码，这很昂贵。 stackoverflow.com/questions/8908780/…我会留下这个问题，因为我仍然很好奇这是否可以做到，但我正在改变我的方法。
我对此感兴趣，因为我正在构建一个 AMP 页面，该页面要求样式不能从外部文件链接（很烦人）

标签： ruby-on-rails ruby-on-rails-3 ruby-on-rails-3.2 sass

【解决方案1】：

我为此创建了一个辅助方法

def render_scss(file)
  text = render("/amp/#{file}")
  view_context = controller.view_context

  engine = Sass::Engine.new(text, {
    syntax: :scss, cache: false, read_cache: false, style: :compressed,
    sprockets:  {
      context:     view_context,
      environment: view_context.assets_environment
    }
  })
  raw engine.render
end

（注意：这包括 sprockets 上下文，以便能够在您的 sass 中处理资产管道）。

然后你这样称呼它（scss 保存在名为 _amp.css.scss 的同一目录中的部分中 - 不在 assets 目录中）：

<style>
  <%= render_scss("amp.css.scss") %>
</style>

（显然这适用于 scss - 但很容易更改以应用于 sass）

def render_sass(file)
  text = render("/amp/#{file}")
  view_context = controller.view_context

  engine = Sass::Engine.new(text, {
    syntax: :sass, cache: false, read_cache: false, style: :compressed,
    sprockets:  {
      context:     view_context,
      environment: view_context.assets_environment
    }
  })
  raw engine.render
end

这种方法的问题在于它是在运行时解析的，但是这可以通过使用标准 Rails 缓存来解决。

例如

<% cache(my_object) do %>
  <style>
    <%= render_scss("amp.css.scss") %>
  </style>
<% end %>

注意：在大多数正常情况下，您会希望将样式表保存在单独的文件中。但是，在某些情况下这是不合适的。例如，我正在使用这种技术来构建Google AMP 页面，它们禁止将样式表放在单独的文件中。

【讨论】：

【解决方案2】：

解析

我认为问题可能与解析

有关

当您调用 partial 时，Rails 通常会尝试在浏览器中渲染纯 HTML，并嵌入 erb 代码。如果你试图以这种方式调用css 文件，我只能认为Rails 将无法以同样的方式处理css

正如 cmets 中提到的，我肯定会使用 stylesheet_link_tag，因为这将指向 HTML 中的 CSS 文件（无论如何浏览器都是这样处理的）

如果您想输出 CSS 本身，您必须在 HTML 文件中定义它，然后使用 partial 输出它（就像您现在尝试做的那样）

【讨论】：

我正在尝试部分输出 CSS 本身。（您的最后一条评论。）使用 stylesheet_link_tag 的建议是可以的，但不幸的是它只解析资产目录中的 sass。如果我能弄清楚如何在资产目录之外解析 sass，那将起作用。
我对partials的理解是解析应该基于扩展名，所以_style.scss应该被解析为sass然后返回。我尝试重命名文件 _style.html.scss 并使用带有格式的渲染：“html”，但我仍然得到“Sass::Rails::ScssTemplate:Class 的未定义方法`call'”所以看起来 Rails 不知道如何在资产管道之外解析 sass。