Rails Asset Pipeline: compressed/minified CSS loaded but not styling document

Question

I have a Rails 4 application that is being served by Nginx + Passenger and utilizing the Rails Asset Pipeline. Before deployment, assets are precompiled and loaded into the public/assets folder.

When I load the page in the browser, the compressed and minified css and javascript files are requested and loaded correctly. The javascript works correctly, but the page is rendered completely un-styled.

Here are the relevant environment variables:

1. Here is the compressed css file: http://pastebin.com/SGZmRfiv

2. I am compressing the CSS with the YUI compressor: config.assets.css_compressor = :yui

3. Picture of the content type of the compressed css file via chrome debugger:

4. I am using the nifty rails-assets-BOWER-PACKAGE-NAME (https://rails-assets.org/) gems to load bower packages as assets:

5. Here is a screenshot of my public/assets folder:

6. Assets loaded on page load:

UPDATE: I'm thinking maybe my issues are stemming from the Rails-Assets gem. My applications.css file:

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

Answer 1

It took me almost a week, but I finally came to a solution that is acceptable.

The first step, was realizing that there was something wrong with the css compression process. I found this out because I had removed this line from the config file: config.assets.css_compressor = :yui. Once removed, the css_compressor fell back to its default compressor, which is sass.

Now, when doing rake assets:precompile, I get the following error:

➜  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

It looks like the compressor doesn't like certain Microsoft related gradient css rules.

FIX I removed several of the BOWER style asset gems and replaced them with rails specific gems. My new gem file looks like this: As you can see, I am now using rails specific sprockets compatible bootstrap an font-awesome gems

My application.css file now looks like this:

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

And i've added a new file called app.scss.css in the app/assets/stylesheets directory:

Summary: By removing several 'rails-assets-BOWER-PACKAGE' style gems, and replacing them with SASS/sprockets compatible and rails specific gems, now rake assets:precompiles works and the browser correctly displays the served CSS.....