CODEWITHSUNDEEP
cssruby-on-rails-3
railsuser400
railsuser400

Reputation: 1023

CSS styles not being compiled for Rails assets

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;
    }
}

Upvotes: 4

Views: 4371

Answers (1)

Simpleton
Simpleton

Reputation: 6415

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

Upvotes: 2

Related Questions