通过RoR资产管道向Javascript添加样式表

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

查看FacebookSDK，我们看到一个php脚本，它执行类似的操作，

JS_文件

和

CSS_文件

是文件名数组：

// 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是愚蠢的。我想在我的风格中使用SCS，我想有语法突出显示，我想在一个合理的环境中开发

我需要做什么，如何连接到资产管道/链轮/倾斜装置，以实现这一目标

代码示例是一个很大的优势，因为我不是一个优秀的ruby开发人员

---

编辑：我浏览了资产管道文档，但没有找到任何方法真正连接到它。我看到的唯一选项是创建一个transfsorm类，该类调用默认转换，然后将输出转换为JS字符串并发送给函数。我真的不知道怎么做。我不知道我是否可以要求一个

.jscss

文件而不使管道崩溃。另一个选择（非常类似）是编写一个gem，同样，我真的不知道该如何实现它。

您可能不需要新的模板引擎来实现这一点；您可以在javascript文件中使用一些辅助方法。您可以使用#evaluate内联呈现给定CSS文件，其结果需要javascript转义。根据，您可以通过挂接到js模板中的Sprocket环境上下文类来包含帮助程序。因此，假设您有一个编译为“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')) %>";

#css_string.js.erb
css_string=“”；

我认为@rossta让你走上了正确的道路。不过，我建议做一些修改。首先，如果您正在用sass编写样式表，并且希望将编译后的css插入到javascript中，那么以下是实现此目的的一种方法：

<%= escape_javascript(Rails.application.assets.find_asset('inline').to_s.chomp) %>

---

链轮不适合解决此问题。您最终会编写出丑陋且随机失败的代码（我是从

Rails.application.assets.find_asset（）

的令人沮丧的个人体验说起的）

相反，研究如何使用非JS依赖项（如CSS和Mustache/Handlebar模板）组合Javascript，并将其全部构建到一个优化的单个文件中以供生产使用

RequireJS使用gem/engine与Rails轻松集成，用于开发和生产

---

请注意，虽然您可以在同一个应用程序中使用Sprockets和RequireJS，但决不能在同一个文件/依赖链中混合依赖机制

/=require…

&

define（[…]，function（…）{}）

。

CSS需要从JS转换有什么好的理由吗？如果只是一次性导出，您可以将CSS写入一个文件并将其放入app/assets/stylesheets/您误解了这个问题。最终结果应该是CSS作为JavaScript中的字符串。这样，脚本就不需要发出另一个http请求来将样式附加到页面。看起来合法，有两个问题：（1）rails在编辑inline.css文件时没有检测到文件更改。（2） 我需要传递下划线模板，SCS会说语法错误。我不确定“传递下划线模板”是什么意思。

//= depend_on inline.css