The new rails 3.1 asset pipeline confused me a lot. In rails 3.0.x, with the sass gem, my global css file got updated when I edit .scss files. But in rails 3.1, that doesn't work anymore. It seems like I have to run a rake task to update my css files whenever I modify the .scss files. I feel like I misunderstand something about the new asset pipeline, but I don't know what it is. Can someone provide a solution or explanation to this problem? Thank you.
There are two possible causes of this. I am assuming that you are in development mode, and that all the gems are loaded.
1. Config
In development mode files are compiled on-demand and cached until any changes are made. You have to get the new 3.1 config options set in the right files or this might not work as expected.
Check out the Rails guides section on upgrading.
2. Extensions
The other is getting the extensions in the right order. For scss that would be file.css.scss. This tells Sprockets to parse the files as scss first, and that the have a css extension. If you had .erb on the end - file.css.scss.erb - then erb is processed first, then scss.
Upgrading apps is a bit tricky because so many things have changed. The asset pipeline guide has lots of useful information and advice.
Sass / SCSS has this built in already so you don't have to do ERB pre-processing.
image-url("image.png")
http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
For me this problem resolved very easy.
I simple deleted all precompiled *.css files from assets/stylesheets and remain all *.scss files. Rails worked fine with *.scss directly, withoutn precompile.
Related
I'm writing a Sinatra app and I'm quite tired of Sprockets (because it's hard to configure and doesn't support some libs). I'm thinking of moving to Compass for stylesheet management but I haven't found anything similar to it when it comes to scripts. Now I can manually compile coffeescript into Javascript and concatenate the resulting files, but how do I compress them for less size? Thank you very much.
You may take a look at Gulp. Here is the good article about using Gulp with Rails (but it would work for Sinatra too).
Anyone doing development with meteor and SCSS. How do you get started, there are no packages for meteorite that i could find that compile .scss files into a specific folder?
Have you tried just compiling the sass/scss into css locally during development? Meteor shouldn't complain if you have your config.rb inside of the client folder along with a sass folder and compiled css folder. It should just automatically read the css per norm. Running $ compass watch inside of this client folder where the config.rb resides is an easy way to automate this css compilation. Telescope is a great sample Meteor app that uses sass in this fashion.
--Alex
Just to get this posted as an answer (was posted as comment); bookcasey posted this sample project as well: https://github.com/gdumitrescu/scoreboard which provides some guidance on how to use sass/scss. Hope it helps.
I was running into issues with Heroku showing my 'places.js' was not precompiled, even though im running on the cedar stack, and during the slug compilation it is running the rake precompile task. so i tried running it locally with rake assets:precompile RAILS_ENV=production and indeed rails was not precompiling my /app/assets/javascripts/places.js.coffee.erb asset.
my production.rb is using default rails 3.1 configuration, and i even tried removing the .erb from the asset, but to no avail.
I also thought since my places.js.coffee.erb asset is NOT included in the sprockets manifest (i include it manually in my app), perhaps it only precompiles assets in the manifest. Requiring it in the manifest didn't work either.
only my application.js.coffee and `application.css are precompiling (with and without a digest).
the only issue i found was possibly poor regex being used to match assets, but the default of (?:\/|\\|\A)application\.(css|js)$ does not match my asset, so it should be included.
i am not sure how to troubleshoot from here. everything is pretty much default. any thoughts on what could be happening here?
Firstly, if you want a file to compile when it is not in a manifest, you need to add it to the precompile config option:
config.assets.precompile += ['places.js']
Secondly, can you edit your question to include your manifest - it may be a syntax issue. I will edit this answer if I can see what the issue might be.
I had the same issue and resolved it like this:
# add new file /app/assets/javascripts/places_manifest.js
//= require places
# add a line to config/application.rb
config.assets.precompile += ['places_manifest.js']
# in your views include places_manifest, not places
javascript_include_tag 'places_manifest'
While the above solutions seem fine, I wondered why do I have to do this?
Like everyone else, I got the error in production stating that my newly added javascript file was not pre-compiled. It was however, I found it's code in the minified application.css file that Rails had generated on my production server.
The problem was that while developing, I thought I would need to add a javascript_include_tag helper to load my new javascript file. Adding that helper was the source of my particular error. I just removed it, and everything worked fine in both development and production environments.
So my suggestion to you is look for signs of your new .js file in your minified application.js and don't modify any other files as the above solutions suggest. Please point out the error in my ways if necessary ;)
I have found jasminerice very helpful for getting all my Jasmine tests to run via Rails 3.1's asset pipeline. The only thing I remain stuck with, is that I cannot get my setup to load any stylesheets (that go with my fixtures) and I need them for a couple of dom / element-style specific tests. Does anybody know how to get the stylesheets to be loaded in this setup?
Support for CSS files has been added recently, the README states:
For including stylesheets in your specs, jasminerice uses a spec.css file. Create such a file next to the spec.js.coffee file:
spec/javascripts/spec.css
and in that file, use sprockets directives to include the right css files, e.g.
/*
*= require application
*/
The change is fairly new so you may want to include the gem directly from the latest github version:
# Gemfile
gem 'jasminerice', git: 'git://github.com/bradphelan/jasminerice.git'
You may also want to be precise with your css markup, so as to not mess up Jasmine's spec runner page as the css files (as the js files) are included directly into it.
I have updated the Jasminerice gem and bradphelan (the Jasminerice author) has pulled that change into the source on Github. So in order to use use stylesheets in your Jasmine tests running through Jasminerice, simply refer to the gem on Github in your Gemfile like so: gem "jasminerice", :git => 'git://github.com/bradphelan/jasminerice.git'. The documentation has also been updated on Github.
I have just updated my application from rails 3.0.7 to 3.1.0.rc4.
In my old app., my .sass files are in the ~/app/stylesheets directory.
Should I move these files to the ~/app/assets/stylesheets directory?
If you want them to be automatically processed by the asset pipeline, then yes. You can manually configure sass to read them from anywhere, but that is the easiest way.
Note: make sure you have sass-rails in your Gemfile. You might want to have a glance at the asset pipeline documentation.