I would like to change my application.css file to a sass file and use @import to pull all the necessary files. Then I want to @import the application.css.sass into page specific sass files. This all works beautifully in development, but when I push it to production env on heroku I get this error:
Error compiling CSS asset
Sass::SyntaxError: File to import not found or unreadable: application
application.css.sass:
@import "reset"
@import "typography"
@import "buttons"
@import "junk"
$yellow: #f0f090
$orange: #f89818
$blue1: #184898
$blue2: #4888c8
body
background: ...
...
/* all the rest of the app-wide styling */
uniquePage.css.sass:
@import "application"
/*page specific styling*/
Then on the pages that need stuff different from application.css I call
!!! 5
%html
%header
= stylesheet_link_tag "uniquePage"
Then I guess the question becomes, how do I make different manifest files for different css sets?
There are several ways to do this:
1. Per page sheets
This is what you are doing now, but I would organise the sheets slightly differently, using @imports in both application and the unique page. (Rather than importing application into the unique page).
2. Use a second sheet for just those pages
You can have a second sheet with just the changes for that page. All pages have the application sheet, and a second tag is added on the unique page with just the required changes. This costs you an extra http request.
3. Reorganize your CSS
Unless the extra CSS is substantial, you may be better off refactoring to include the code in your main file. It is easy to add an extra class to the body tag of the unique page and adjust any CSS to for the page to use that.
You can still put that CSS in a file for the unique page (to help with maintenance), and @import it to your main file.
As a general rule, unless the CSS changes are substantial, I would try to merge them into the main CSS, otherwise go for option 1.