Rails Asset Pipeline：加载了压缩/缩小的CSS但没有样式文档

Question

我有一个由Nginx + Passenger提供服务并使用Rails Asset Pipeline的Rails 4应用程序。在部署之前，资产已预编译并加载到public / assets文件夹中。

当我在浏览器中加载页面时，请求并正确加载压缩和缩小的css和javascript文件。 javascript工作正常，但页面呈现完全未设置样式。

以下是相关的环境变量：

1. 以下是压缩的css文件：http://pastebin.com/SGZmRfiv

2. 我正在使用YUI压缩器压缩CSS：config.assets.css_compressor = :yui

3. 通过chrome调试器压缩的css文件的内容类型图片：

4. 我正在使用漂亮的rails-assets-BOWER-PACKAGE-NAME （https://rails-assets.org/）gems将bower软件包加载为资产：

5. 以下是我的公共/资源文件夹的屏幕截图：

6. 在页面加载时加载的资源：

更新：我想也许我的问题源于Rails-Assets gem。我的applications.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就会回落到默认的压缩器，这就是sass。

现在，在执行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

看起来压缩器不喜欢某些与Microsoft相关的渐变css规则。

<强> FIX 我删除了几个BOWER风格的资产宝石，并用轨道专用宝石替换它们。我的新gem文件如下所示： 正如你所看到的，我现在正在使用与轨道特定的链轮兼容的bootstrap字体 - 真棒宝石

我的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 / assets / stylesheets目录中添加了一个名为app.scss.css的新文件：

总结：通过删除多个'rails-assets-BOWER-PACKAGE'样式的宝石，并用SASS / sprockets兼容和rails特定宝石替换它们，现在rake assets:precompiles正常工作，浏览器正确显示服务的CSS .. ......