ruby-on-rails - 通过 sprockets 动态渲染一个 sass 文件

Question

我想从助手那里渲染 .scss.erb 中的一些变量使用 image-url() 的模板萨斯函数:

// template.scss.erb

#<%= id %> {
  background-image: image-url('<%= image_file %>');
}

到目前为止，ERB 部分很简单:
(利用 this stack overflow answer )

vars_binding = OpenStruct.new(
                 id:         'foo', 
                 image_file: 'foo.jpg'
               ).instance_eval { binding }

template = File.read('path/to/template.scss.erb')

rendered_sass = ERB.new(template).result(vars_binding)

运行该代码， sass现在等于:

#foo {
  background-image: image-url('foo.jpg');
}

但是，当我下次尝试运行时:

css = Sass::Engine.new(
  rendered_sass,
  syntax:     :scss,
  cache:      false,
  load_paths: view_context.assets.paths,
  read_cache: false,
  style:      :compressed
).render

它返回

NoMethodError: undefined method `[]' for nil:NilClass
from …/sprockets-3.2.0/lib/sprockets/sass_processor.rb:267:in `sprockets_context'

因为调用 Sass::Engine不提供 Sprockets 上下文。

如果我删除 image-url()来自 .scss.erb模板，并将其替换为原生 url() ，然后它将正确呈现为 CSS，没问题。

那么如何在 sprockets 上下文中渲染这个模板呢？

Answer 1

在挖掘了 similar question 之后，经过反复试验，我找到了解决方案:我必须提供 :sprockets调用 Sass::Engine.new 时的哈希值.

css = Sass::Engine.new(
  rendered_sass,
  syntax:     :scss,
  cache:      false,
  load_paths: view_context.assets.paths,
  read_cache: false,
  style:      :compressed,

  # The key ingredient…
  sprockets:  {
    context:     view_context,
    environment: view_context.assets
  }
).render

需要注意的是 view_context是从 View 文件传递的，但也可能是 ActionView::Base.new