javascript - 使用 RoR Assets 管道将样式表添加到 Javascript

Question

我正在开发第三方脚本。我将自己的样式表添加到嵌入脚本的页面。目前，样式在 JavaScript 中是一个长字符串。这很愚蠢，但它比附加样式链接并发出另一个 http 请求要快。

查看 facebook SDK，我们看到一个 php 脚本执行类似的操作，JS_FILES 和 CSS_FILES 是文件名数组:

// all.js
foreach ($JS_FILES as $file) {
  echo file_get_contents($file);
}

$css = '';
foreach ($CSS_FILES as $file) {
  $css .= file_get_contents($file);
}
// css URLs are relative to facebook domains
$css = preg_replace('#url\(/#', 'url(http://static.ak.fbcdn.net/', $css);
echo 'FB.Dom.addCssRules(' . json_encode($css) . ', ["pkg"])';

因此 css 被转换为 JSON 并发送到 FB.Dom.addCssRules 函数，该函数将样式附加到页面。

在 JS 字符串中写 css 是愚蠢的。我想在我的风格中使用 SCSS，我想要语法高亮，我想在一个合理的环境中开发。

我需要做什么，如何连接到 Asset Pipeline/Sprockets/Tilt 来实现这件事？

代码示例是一个很大的优势，因为我不是一个疯狂的 ruby​​ 开发者。

编辑:我浏览了 Asset Pipeline 文档，但没有看到任何实际连接到它的方法。我看到的唯一选择是创建一个调用默认转换的 Tranfsorm 类，然后将输出转换为 JS 字符串并将其发送到函数。我真的不知道该怎么做。我不知道我是否可以要求 .jscss 文件而不会使管道崩溃。另一种选择(非常相似)是编写像 Black Coffee 这样的 gem ，我真的不知道该如何实现。

Answer 1

您可能不需要新的模板引擎来完成此任务；您可以在 javascript 文件中使用一些辅助方法。您可以使用#evaluate 内联呈现给定的 CSS 文件，其结果需要进行 javascript 转义。根据sprockets documentation ，您可以通过挂接到 js 模板中的 Sprockets 环境上下文类来包含帮助程序。因此，假设您有一个编译为“inline.css”的 css 文件，您可以包含 ActionView::Helpers::JavaScriptHelper 并执行以下操作:

# css_string.js.erb
<% environment.context_class.instance_eval { include ActionView::Helpers::JavaScriptHelper } %>
css_string = "<%= escape_javascript(evaluate('inline.css')) %>";