Just trying to get to grips with the new Rails 3.1 way of managing assets. I've copied across a .scss stylesheet (style.css.scss) to app/assets/stylesheets/, and added
= stylesheet_link_tag :style
To the app/views/layouts/application.html.haml file. I had expected that was all I needed to do - but no joy; scss doesn't seem to be generating the css sheet. When I view the 'style.css' source in page source (yes, it's called in the html source) it says the following:
Routing Error No route matches [GET]
"/assets/style.css"
So...any ideas how to get 3.1 to generate the actual stylesheet from the scss?
Many thanks...
Try adding a style.css file to your assets/stylesheets/ directory that looks like this:
/*
*= require style.css.scss
*/
That should automatically convert your style.css.scss to plain CSS and include it in what /assets/style.css returns.
Don't know if the problem you described was due to Rails 3.1 not being released yet, but the "standard" Rails 3.1 way would be to put style.css.scss in your app/assets/stylesheets folder and then linking to application.css which is a socalled manifest file that includes all other files from the folder.
You would then be using
= stylesheet_link_tag 'application'
instead.
Best regards,
Lasse
Related
i am using plovr for developing a closure application. and that i am often using plovr in serve mode. from this source code of plovr and this post from the author it seems that plovr also supports compiling closure stylesheets (gss).
with that in mind, i am specifying the bare minimum in my plovr config file to get this working. but can't figure out what url i should use in my page to load the compiled css.
for example, while plovr is running the compiled js can be fetched with
http://localhost:9810/compile?id=project_id
i guess fetching the compiled css can be done with something like the following:
http://localhost:9810/view?id=project_id&name=output.css
but unfortunately can't figure out the right documentation for it. what is the approach to achieve this?
also is it possible to make use of the css class name renaming feature through plovr?
http://localhost:9810/css/project_id/
did the trick. looks like i need not specify the output css file name.
This is what I have done to my server
set :static_cache_control, [:public, {:max_age => 604800}]
However, when I use firebug I still see 0 max-age. And I'm using Sinatra Assets Pack http://ricostacruz.com/sinatra-assetpack/
I'm not sure if they conflict each other?
Thanks a lot.
Which file you add max-age header?
If it's JavaScript or CSS file, please try to build files with Sinatra-assetpack.
Files built are located in under 'public' directory.
Please see the following, written how to build.
http://ricostacruz.com/sinatra-assetpack/#need_to_build_the_files
In both development and production my app seems to work fine. However, I noticed it was making some requests for CSS files that were returning with 404s.
Rails 3.1.1
Heroku "Cedar" stack
the compiled production CSS "application-b3ce81dc0178ccf6b6ac77b8bc7774ef.css" begins with..
#import url(jquery.ui.base.css);#import url(jquery.ui.theme.css);#import url("jquery.ui.core.css");#import url("jquery.ui.autocomplete.css");
namely - the files that are resulting in 404s so it looks like I'm directly requesting files that have already been compiled into the application.css
application.css.scss:
/*
*= require vendor
*= require_self
*= require_tree .
*/
#import "bootstrap";
.. some more regular CSS ..
removing the require vendor line gets rid of the duplicate requests, but also results in my site missing required styles..
Any ideas?
You cannot use the CSS import with the asset pipeline as the files are not available normally, only via their fingerprinted versions.
You need to have the correct files in your application.css (via the manifest in application.css.scss) or use the Sass helpers to put the correct asset URLs in your code.
http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
I am using the assets pipeline (in Rails 3.1.3) and am kind of struggling to make it work in production.
Situation
In my /app/assets/stylesheets directory I have the following files:
application.css --> this is the default rails one
stylesheet.css --> This is my custom stylesheet
I spent a lot of time getting my stylesheet.css included in the /public/assets/directory in production (by running rake assets:precompile) and I finally made it by adding the following line into in my application.rb file:
config.assets.precompile += ['stylesheet.css']
I know have the right precompiled stylesheet.css file in production.
My Problem
The problem I have is when using stylesheet_link_tag with my stylesheet.css file. It turns out:
<%= stylesheet_link_tag "stylesheet" %> is resolved into <link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css"> in production I would expect the path to be resolved into /assets/stylesheet.css just like it does in development.
What is even more surprising is that application.css behaves perfectly even though <%= stylesheet_link_tag "application"%> resolves into <link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css">. What I don't understand is that the public/stylesheets/ directory does not exist in rails 3.1.
Any idea ?
Richard Hulse answers pointed me to the right direction. What happens is really subtle..
The answer to my question is Rails 3.1 assets has no fingerprint in production.
Basically, my project use mongoid instead of ActiveRecord. According to Mongoid documentation about configuration, the application.rb file can be modified to not include ActiveRecord which means removing:
require railties/all
And replacing it with:
require "action_controller/railtie"
require "action_mailer/railtie"
require "active_resource/railtie"
require "rails/test_unit/railtie"
# require "sprockets/railtie" # Uncomment this line for Rails 3.1+
I was so used to doing this manipulation with rails 3.0.x that I did not pay attention to the comment related to Rails 3.1
My problem was that I was not requiring sprockets !
Thank you all for your help !
The reason you can access stylesheet.css in development is because of how Sprockets works.
In development mode ALL requests to anything under /assets are sent to Sprockets to process. Sprockets will directly map requests to paths, one-to-one, so you can access any assets stored in app/assets/etc.
All requests go through Sprockets; it is serving the files to your browser.
In production things are different. A fingerprint is added to filenames, and the expectation is that you'll precompile your assets to static files. This is for performance reasons - Sprockets is not fast enough to serve lots of requests.
Only those CSS and JS files referenced by the default manifests are compiled into application.css and application.js. Other files that you reference are not precompiled unless they are added to the config.assets.precompile array in your config file.
You say that the files resolve to /stylesheets/stylesheet.css. The pipeline should generate a path like this in development: /assets/applicaton.css. In production there should be a fingerprint in the filename. What you have posted suggested that the pipeline is not enabled (these are the old, pre 3.1, locations for the files).
If this is an upgraded app, it is likely that you have missed some crucial config option. This is the main cause of dev->production issues. Check that the pipeline options are set exactly as they are in the last section of the pipeline guide. (My guess is that you are missing config.assets.enabled = true in application.rb)
And for clarity I would suggest changing the name of stylesheet.css to admin.css, while including this in the precompile array (as you already had done).
With the config options set correctly, and your admin manifest included in precompile, you should have application.css available for the front end and admin.css available for the back-end, both linkable via the helper methods.
You application.css should be a manifest file, meaning that your when you run your program it should include your stylesheet.css automatically.
make sure it has these two lines.
application.css:
/*
*= require_self
*= require_tree .
*/
If it does then something else isn't working properly, you shouldn't need the line:
config.assets.precompile += ['stylesheet.css']
If that isn't working either make sure you have all the settings enabled from this Asset Pipeline guide.
While I was looking around actionpack to see what might be causing this problem I found this little gem in the 3.1.1 changelog:
javascript_path and stylesheet_path now refer to /assets if asset pipelining is on.
Soooo, If you're using 3.1.0 upgrade to 3.1.1 and see if it fixes it. If you've already upgraded then were back to square one. But it does seem to describe your problem since stylesheet_link_tag uses stylesheet_path interally.
I have a rails 3.1 app deployed in a subdirectory (/customers) on Apache+Passenger, using this method http://www.modrails.com/documentation/Users%20guide%20Apache.html#deploying_rails_to_sub_uri
In /app/assets/stylesheets/app.css.erb this code
background: url(<%=image_path("top.jpg")%>)
generates
background: url(/assets/top.jpg)
instead of /customers/assets/top.jpg
In my views,
image_path("top.jpg")
will generate
/customers/assets/top.jpg
like I expect.
Any ideas?
You should use asset_path inside your CSS instead of image_path.
background: image-url("top.jpg")
should work after renaming to .css.scss