Search code examples
cssruby-on-railsimageextjsstylesheet

Rails ExtJS- How to build/compile a css file

I have a Rails and ExtJS application which has all images under 

MyApplication/app/assets/graphics

The styles are listed in the following file->

 MyApplication/app/assets/stylesheets/css/styles.less

The following file seems to have a compiled version of all styles

MyApplication/app/assets/stylesheets/css/lt.css

I added a new image test.png under graphics folder. How can I compile this into the styles? So far, when I refer to this image in my code, it doesn't show up since it is not in the lt.css file. Thanks!

Solution

  • UPDATE

    Sorry, I didn't see that you have css folder within stylesheet folder.

    According to Rails Guide, If you have other manifests or individual stylesheets and JavaScript files to include, you can add them to the precompile array in config/initializers/assets.rb:

    Rails.application.config.assets.precompile += ['admin.js', 'admin.css', 'swfObject.js']

    SASS & LESS both uses asset helpers asset-url($relative-asset-path) except that SASS is equipped with rails by default, so you could use this helper in your lt.less or lt.scss ( file extension is important )

    background: image-url('test.png');

    Just change your lt.css to .less or .scss and the image will show up, and it will be precompiled for you, after using asset helper.

    In case that you want to compile to production run this from your terminal before deployment:

    rake tmp:cache:clear
rake assets:precompile RAILS_ENV=production

    I hope it helps