使用RoR Asset Pipeline將樣式表添加到Javascript

我正在開發第三方腳本。我將自己的樣式表添加到腳本嵌入的頁面中。目前，這種風格在JavaScript中是一個很長的字符串。這很愚蠢，但它比追加樣式鏈接併發出另一個http請求要快。使用RoR Asset Pipeline將樣式表添加到Javascript

縱觀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，我想要突出語法，並且希望在合理的環境中進行開發。

我需要做什麼，如何掛鉤資產管道/鏈輪/傾斜，使這件事情發生？

代碼示例是一大優點，因爲我不是一個瘋狂的好ruby開發者。

編輯：我瀏覽了資產管道文檔，沒有看到任何實際掛鉤的方法。我看到的唯一選擇是創建一個調用默認轉換的Tranfsorm類，然後將輸出轉換爲JS字符串並將其發送給函數。我真的不知道該怎麼做。我不知道我是否甚至可以要求輸入.jscss文件，而不會讓管道變得異常脆弱。另一個選擇（非常相似）是寫一個像Black Coffee這樣的寶石，我再也不知道該如何去實現這個了。

來源

2012-09-23 CamelCamelCamel

是否有一個很好的理由，爲什麼CSS需要從JS轉換？如果只是一次性導出，則可以將CSS寫入文件並將其放入應用程序/ assets/stylesheets/ – rossta

您誤解了該問題。最終結果應該是JavaScript中的CSS作爲字符串。這樣腳本就不需要再創建一個http請求來將樣式附加到頁面上。 – CamelCamelCamel

我覺得@rossta已經把你在正確的軌道上這裏。不過，我會建議一些修改。首先，如果你正在寫在SASS的樣式表，並希望編譯CSS在JavaScript中插入，下面將是實現這一目標的一種方法：

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

其中inline.css.scss是資產的搜索路徑上的某個地方。方法find_asset將編譯您的sass並將輸出作爲字符串返回。一個問題是，包含它的JavaScript不會被重新編譯，除非JavaScript文件本身發生變化，或者您明確將inline.css標記爲依賴項。你可以通過包含指令

//= depend_on inline.css

來源

2012-09-27 03:11:15 cdesrosiers

您可能不需要新的模板引擎來完成此操作;您可以在JavaScript文件中使用一些輔助方法。您可以使用#evaluate來呈現給定的CSS文件內聯，其結果需要javascript轉義。根據sprockets documentation，您可以通過在js模板中直接掛入Sprockets環境上下文類來包含helpers。因此，假設你有一個編譯爲「inline.css」一個CSS文件，您可以包括::的ActionView ::助手和JavaScriptHelper做到以下幾點：

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

來源

2012-09-26 02:34:09 rossta

看起來合法，有兩個問題：（1）在編輯inline.css文件時，rails沒有檢測到文件更改。（2）我需要傳遞下劃線模板，scss會說出語法錯誤。 – CamelCamelCamel

我不確定「傳下劃線模板」是什麼意思。 – rossta

鏈輪不是理想的解決這個問題。你最終會寫出醜陋而且隨機失敗的代碼（我通過Rails.application.assets.find_asset()從令人沮喪的個人經歷中發表意見。）

但是，你看着RequireJS + text plugin用於撰寫的Javascript不在JS（如CSS &鬍子/把手模板）的依賴，而這一切都建立成一個優化的單一文件進行生產。

RequireJS使用requires-rails寶石/引擎輕鬆地集成了Rails &產品。

只需要注意的是，雖然可以使用鏈輪& RequireJS在相同的應用程序，你不應該在同一個文件/依賴鏈混合依賴機制//= require ... & define([...], function(...){})。

來源

2012-09-29 20:51:20 Mars

使用RoR Asset Pipeline將樣式表添加到Javascript

回答

相關問題