Question

our site is written using Ruby on Rails. We are using coffeescript & SCSS. I’m having some problems setting up uniformjs with my site. Here’s a link to uniformjs: http://uniformjs.com/

Our site uses coffee for JS and SCSS for CSS, and I’m having issues setting it all up correctly. Here’s what I’ve done:

• put uniform.default.css in assets/stylesheets
• put jquery.uniform.min.js in assets/javascripts

in home.coffee.js, include the line:

$(function(){ $("select, input:checkbox, input:radio, input:file").uniform(); });

I expected that this would all work nicely, since coffee would pull the JS file into application.js, SCSS would pull the CSS file into application.css and the home.coffee.js file has the line to actually make everything uniform.

I’m getting a vague error about a word not being defined. Then I renamed jquery.uniform.min.js to jquery.uniform.min.js.coffee and the uniform.default.css to uniform.default.css.scss.

Now I get an error saying:

Invalid CSS after "...: alpha(opacity": expected comma, was ":0);"
  (in /home/user/Desktop/mysite/app/assets/stylesheets/uniform.default.css.scss)

Any help on getting this setup would be really appreciated. Cheers!

UPDATE so I put the .uniform call in application.js instead of home.js.coffee. That made the bugs go away. However, the styling is still not working correctly. I.e. my text fields still look weird, and the images for the radio buttons aren’t appearing, though I have the image file in assets/images.

Ringo

Answer 1

For the CSS (with included images) to work properly with the asset pipeline you should either:

• name your file blah.css.erb and use the asset_path helper
• name your file with a .scss extension and use image-url() in place of url() and make sure there aren’t any scss errors in the css file

Hope that helps.

EDIT: it looks like this is already an issue on Github with Sass throwing an error. Try changing alpha(opacity:0) to alpha(opacity=0) in your uniform.css.scss file.