Asset pipeline not precompiling sass - ruby-on-rails

I've updated my app to use the rails 3.1 asset pipeline (I think). I can compile .css files but not css.scss. I am running the sass-rails gem but nothing seems to work.
What should I check? Sorry, I don't know exactly what info I should supply here to help debug. I can edit this...
EDITS:
My .scss file contains:
/*
*= require_self
*= require_tree .
*/
edit:
see Sprockets::CircularDependencyError in Store#index
Thanks,
Rim


Remember that css.scss files need to be included, not imported like the rest:
So: Turn you application.css into an application.css.scss, and do like this in it:
/*
*= require ./normal/custom.css
*= require_self
*/
#import "normal/design/control_panel";

Related

How to load style.scss file in application.css file ruby on rails

I have ruby on rails project in which I want to include scss files in my style sheets that is application.css
The directory structure is look like below:
The problem is that when I try to do this in my application.css file:
*= require font-awesome
*= require bootstrap
*= require slick
*= require basic-theme
*= require style
*= require_self
#import url("style.scss"); //it is in scss folder.
it still does not parse the code in it. Also if I set the path with assets/ it does load it but gives error like:
Sass::SyntaxError in Home#index
Undefined variable: "$base-font".
How I can easily import all these scss files in my rails app? Also any best practices please?

Instead you need to use
#import "<relative path to style.css without .scss>"

Rails less/sass conflict

I have a LESS-based rails application.
since I added summernote html editor, I had to add also SASS code to my project.
So I added these lines:
Gemfile:
gem 'font-awesome-rails'
gem 'summernote-rails'
gem 'bootstrap-sass'
application.css:
*= require font-awesome
*= require summernote
In local everything works fine.
When I commit the application to heroku I get the following error:
Sass::SyntaxError: Undefined variable: "$alert-padding".
(in /tmp/build_xxx/vendor/bundle/ruby/2.1.0/gems/bootstrap-sass-3.3.1.0/assets/stylesheets/bootstrap/_alerts.scss:10)
I guess I miss the SASS variables, but have no idea how to add them without create any conflict with the LESS code.
============= EDIT =================
The precompilation is broken on the first sass variable it finds, in file /gems/bootstrap-sass-3.3.1.0/assets/stylesheets/bootstrap/_alerts.scss:
.alert {
padding: $alert-padding;
I assume the precompiler does not have any SASS variable declared, and fails to precompile on the first place it finds any.
============= EDIT =================
I added to my application.scss the #import I understand I needed to have, now it looks like this:
#import "bootstrap-sprockets";
#import "bootstrap/variables";
#import "bootstrap/mixins";
#import "bootstrap";
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require custom_bootstrap/custom_bootstrap
*= require custom
*= require social-share-button
*= require bootstrap-datetimepicker
*= require dataTables/jquery.dataTables
*= require dataTables/src/demo_table_jui
*= require pricing
*= require jquery.fileupload-ui
*= require font-awesome
*= require social-buttons-3.css
*= require summernote
*/
I definitely have _variables.scss included (I renamed it in order to be sure), and I see that $alert-padding is declared:
$alert-padding: 15px !default;
$alert-border-radius: $border-radius-base !default;
$alert-link-font-weight: bold !default;
Still, I get this error!
PD -
I use the following command in order to check precompilation locally:
RAILS_ENV=development bundle exec rake assets:precompile

You can find installation instructions here.
I fail to see at least those:
application.css should be application.scss
gem 'sass-rails' in your Gemfile
use the import statements accordingly and appropriately in your application.scss

Ruby on Rails - Normalize-rails gem

I have installed normalise-rails gem in my project and it all seems to work fine.
But I notice there is no css file generated in the app and I'm curious to know how this is working.
This is not a problem and such but it will be good to know what has happened in the background.

Look, to make it work you added to application.css these lines:
*= require_self
*= require normalize-rails
*= require_tree .
And middle line just requires normalize-rails.scss file that you can found in gem's vendor/assets/stylesheets directory.

That's because the gem isn't downloaded in your project. All the gems are installed in your INSTALLATION DIRECTORY - more info.
If you want to use an edited version of normalize.css, then just download the stylesheet and save it in your app's
vendor/assets/stylesheets/
folder and include that file in your
app/assets/stylesheets/application.css
, like:
/*
*= require_tree .
*= require normalize
*= require_self
*/

How can I precompile all css files in a particular folder?

To precompile all css files in a project I could add this to production.rb:
config.assets.precompile << '*.css'
But how can I add only css files in a particular folder?

Add all stylesheets into your app/assets/stylesheets/application.css:
/*
*= require_self
*= require_tree dir_one
*= require_tree dir_two
*/
Then they will be precompiled. I think this is the preferred way over using config.assets.precompile.
If you really want to use it, this SO question should help: How do I use config.assets.precompile for directories rather than single files?

Rails 3.1 and jquery-ui assets

This was asked in another question, but none of the solutions appear to work for me in 3.1rc1.
I'm trying to use the new assets stuff in rails 3.1 - I have the files:
./vendor/assets/stylesheets/jquery-ui-1.8.13.custom.css
./vendor/assets/javascripts/jquery-ui-1.8.13.custom.min.js
I then added:
//= require jquery-ui to app/assets/javascripts/application.js
*= require jquery-ui to app/assets/stylesheets/application.css
The jquery-ui javascript file loads just fine, but the css file says:
Sprockets::FileNotFound (couldn't find file 'jquery-ui'
(in /home/xanview2/xancar/app/assets/stylesheets/application.css):6):
Any ideas?

Example of a working setup:
$ cat app/assets/javascripts/application.js
//= require jquery
//= require jquery-ui
$ cat app/assets/stylesheets/application.css
/*
*= require vendor
*
*/
$ cat vendor/assets/stylesheets/vendor.css
/*
*= require_tree ./jquery_ui
*
*/
vendor/assets/ $ tree
stylesheets
vendor.css
jquery_ui
     jquery-ui-1.8.13.custom.css
...
images
   jquery_ui
   ui-bg_flat_0_aaaaaa_40x100.png
...
Finally run this command:
vendor/assets/images $ ln -s jquery_ui/ images
Enjoy your jQuery UI

This is a great article to read about Rails 3.1's asset pipeline and jQuery UI: JQuery-UI css and images, and Rails Asset Pipeline

You might have more luck with the jquery-ui-rails gem (see announcement), which packages the jQuery UI JavaScripts, stylesheets and images as assets for you.

This topic comes up a lot, and now that a significant amount of time has passed, things may be different.
In Rails 3.1.2, I found something that works without symbolic links.
Follow the steps above, but put the images for the theme right next to the jquery-ui-xxx.css file in an images/ folder. This saved me quite a few headaches.
Yes, this would mean the images would reside in a stylesheets/ folder in vendor/assets, but it works and it is quick to do.

Have you tried using the rails-asset-jqueryui gem? It vendors jquery-ui and the standard themes (currently v1.8.16) and makes them available via the asset pipeline. The following example calls for the Smoothness theme.
Gemfile:
....
gem 'rails-asset-jqueryui'
...
app/assets/javascripts/application.js:
...
//= require jqueryui
...
app/assets/stylesheets/application.css:
...
= require smoothness
...

If you're using the jquery-ui-rails gem:
application.css
/*
*= require jquery.ui.all
*/
application.js
//= require jquery.ui.all

It seems to me that a lot of confusion can be avoided by keeping these library assets out of assets/javascripts and assets/stylesheets dirs, where sprockets et al have some opinions about what should happen.
Say you've downloaded a customized jquery-ui zipfile from the themeroller. Try this:
unpack the zip file into an subdir of an assets dir, something like
vendor/assets/jquery-ui-1.8.23.custom
in application.rb add:
config.assets.paths << Rails.root.join('vendor', 'assets', 'jquery-ui-1.8.23.custom').to_s
add manifest files in the usual places:
vendor/assets/javascripts/jquery-ui.js:
//= require_tree ../jquery-ui-1.8.23.custom
vendor/assets/stylesheets/jquery-ui.css:
*= require_tree ../jquery-ui.1.8.23.custom
in config/environments/production.rb, add (referring to manifest filenames):
config.assets.precompile += %w(jquery-ui.js jquery-ui.css)
in views:
<%= stylesheet_link_tag 'jquery-ui' %>
<%= javascript_include_tag 'jquery-ui' %>

if you use this:
https://github.com/carlhoerberg/sprockets-urlrewriter
i believe you can just dump the whole shebang in a directory and require the css file... it will smoothly rewrite the relative urls.
you just have to install the gem and add a config line to application.rb

Resources