Rails資產管道：壓縮/縮小的CSS加載，但沒有樣式文件

Question

我有一個Rails 4應用程序，由Nginx + Passenger提供服務並利用Rails Asset Pipeline。在部署之前，資產會被預編譯並加載到公共/資產文件夾中。

當我在瀏覽器中加載頁面時，請求並正確加載壓縮和縮小的CSS和JavaScript文件。 JavaScript的工作正常，但頁面呈現完全無風格。

下面是相關的環境變量：

1. 這裏是壓縮的css文件：http://pastebin.com/SGZmRfiv

2. 我壓縮CSS與YUI壓縮機：config.assets.css_compressor = :yui

3. 的圖片通過Chrome調試器壓縮的css文件的內容類型：

4. 我現在用的是漂亮的軌道資產鮑爾-PACKAGE-NAME （https://rails-assets.org/）寶石加載涼亭包作爲資產：

5. 這裏是我的公共/資產的文件夾的截圖：

6. 資產加載頁面加載：

更新：我想，也許我的問題是從Rails-Assets gem而產生。我的應用程序.css文件：

*= require_self 
*= require font-awesome 
*= require vendors 
*= require bootstrap 
*= require sweetalert 
*= require jquery-ui 
*= require_tree . 

Answer 1

花了我差不多一個星期，但我終於找到了一個可以接受的解決方案。

第一步，意識到css壓縮過程出了問題。我發現了這一點，因爲我已經從配置文件中刪除了這一行： config.assets.css_compressor = :yui。一旦被移除，css_compressor就會回到它的默認壓縮器，這是很糟糕的。

現在，做rake assets:precompile的時候，我得到以下錯誤：

➜ stylesheets git:(master) ✗ rake assets:precompile 
(in /home/ubuntu/spice-conduit) 
rake aborted! 
Sass::SyntaxError: Invalid CSS after " filter: progid": expected ";", was ": DXImageTransf..." 
    (in /home/ubuntu/spice-conduit/app/assets/stylesheets/application.css) 
(sass):3566 
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1147:in `expected' 
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1085:in `expected' 
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1080:in `tok!' 
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:586:in `block in declaration_or_ruleset' 
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1123:in `call' 
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:1123:in `rethrow' 
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:592:in `declaration_or_ruleset' 
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:554:in `block_child' 
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:546:in `block_contents' 
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:535:in `block' 
/home/ubuntu/.rvm/gems/ruby-2.1.3/gems/sass-3.2.19/lib/sass/scss/parser.rb:52 

它看起來像壓縮機不喜歡某些微軟相關的梯度CSS規則。

FIX 我刪除了幾個BOWER風格的資產寶石，並將其替換爲特定於導軌的寶石。我的新寶石文件看起來像這樣： 正如你所看到的，我現在用的導軌引導的字體真棒寶石

我application.css文件現在看起來是這樣的兼容特定鏈輪：

11 *= require_tree . 
12 *= require_self 
13 *= require font-awesome 
14 *= require vendors 
15 *= require bootstrap 
16 *= require sweetalert 
17 *= require jquery-ui 
18 */ 

並且我添加了一個名爲app.scss的新文件。CSS在app /資產/樣式表目錄：

摘要：通過去除幾個「軌資產鮑爾-PACKAGE」風格的寶石，並與上海社會科學院取而代之/鏈輪兼容和軌道特定的寶石，現在rake assets:precompiles作品和瀏覽器正確顯示服務的CSS .....