CSS styles not being compiled for Rails assets

Question

I have the following setup with my stylesheets in a Rails 3.2 application. I have an application.css file with many styles defined in them, and several other files for more specific styles, like everything to do with the footer is in footer.css.

In development, everything works, but in production, none of the mobile styles in the required files are compiled i.e. everything above the @media only screen and (min-width: 768px) line for each of the stylesheets.

The main application.css file has about 700 lines of styles defined, after which it also has a @media only screen and (min-width: 768px) media query in it. Inside the media query is about another 700 lines overriding the previous 700 lines of styles, for desktops. These styles, however, are successfully compiled. I don't understand why the required files don't work the same way.

application.css

*= require_self
*= require base.css
*= require footer.css

.benefit {
  display: block;
  font-size: 0.8em;
  margin: 1em;
}

@media only screen and (min-width: 768px) {
  .benefit {
    font-size: 1em;
    margin: 3em;
  }
}

# All above styles compile

Base.css

header, section, footer,
aside, nav, article, figure {
    display: block;
}

html, body {
    height: 100%;
    background: #DEDEDE;
}

# Above styles don't compile

@media only screen and (min-width: 768px) {

# Below style does compile

    body {
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    }

}

footer.css

footer {
    background: #ffffff;
    width: 100%;
}

# Above style doesn't compile

@media only screen and (min-width: 768px) {

# Below style does compile

    footer {
        background: none repeat scroll 0 0 #000;
        color: #818A8A;
        padding: 0;
    }
}

Edit: I tried explicitly adding the required css files' mobile styles in their own media queries as was suggested in this answer and the code update below but it didn't work.

footer.css

@media only screen { 
  footer {
    background: #ffffff;
    width: 100%;
  }
}

# Above style STILL doesn't compile

@media only screen and (min-width: 768px) {

# Below style does compile

    footer {
        background: none repeat scroll 0 0 #000;
        color: #818A8A;
        padding: 0;
    }
}

Are you seing any errors in the asset compilation process? Are you manually running it or do you have Rails configured to compile automatically? If it's the latter, try running rake assets:precompile --trace and paste the results if there are any errors. — d_ethier
– d_ethier, Commented Mar 2, 2013 at 19:06
Rails does it, when pushing to Heroku. No errors on the rake task locally and nothing out of the ordinary in terms of output when pushing to Heroku. — railsuser400
– railsuser400, Commented Mar 2, 2013 at 19:11

Simpleton · Accepted Answer · 2013-03-10 15:04:17Z

2

With over 1000 lines of styling, you're bound to have omitted a semi-colon or curly brace somewhere along the line. As suggested by d_ethier in the comments, one way to test is to compile with the --trace flag but your compilation will fail silently if the assets are plain CSS files.

What you want to do is include sass-rails in your Gemfile and rename your stylesheets to scss files so that if there are any errors, they'll cause the compilation to fail and will highlight your problem. Temporarily move your styles from your application.css file to another file (let's say all.css.scss) as well:

application.css:

*= require_self
*= require all.css.scss
*= require base.css.scss
*= require footer.css.scss

answered Mar 10, 2013 at 15:04

Simpleton

6,45512 gold badges57 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS styles not being compiled for Rails assets

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related