Question

A typical extjs example application includes the extjs library by referencing files such as:

ext-all.css
ext-all.js

What’s the ‘rails 3.1 way’ of including these files, noting that they reference hundreds? of files in subdirectories

(e.g. ext-4.0.2/resources/themes/stylesheets/ext4/default/_all.scss)

and there are relative paths:

(e.g. background-image:url(‘../../resources/themes/images/default/shared/shadow.png’))

I’m tried numerous combinations of require_tree et al., but can’t seem to get it to work.

I’m wondering if I need to mess w/ ‘provide’, but I can’t seem to find the documentation I need.

Answer 1

What you want is for this file to compile via the Rails asset pipeline:

resources/themes/templates/resources/sass/my-ext-theme.scss

To get this to work, I learned a few things the hard way:

1. ExtJS uses SASS to compile (so does Rails) and Compass, which includes blueprint and compass CSS kits. Compass doesn’t work with rails, you need to use the gem “compass-rails”, which doesn’t include the CSS toolkits. Only the main compass gem has these toolkits, and it’s a dependency for compass-rails so you should get them if you bundle compass-rails, they need to be in your sass.load_paths config. If you include the “compass” gem without compass-rails you will have strange errors and become an expert at the rails asset pipeline as you try to solve them!
2. ExtJS uses an older version of SASS, the newer one Rails uses doesn’t like having functions and mixins defined inside of modules. To fix this, look at the errors it’s giving you (always a function or mixin definition) and move them to _functions or _mixins files.
   (more info: getting error after ugrading to sass-3.1.8)

Here’s how to get up and running:

Put this into your config/application.rb:

# Set up our ExtJS SASS build environment
config.sass.load_paths << "#{Rails.root}/vendor/assets/stylesheets"
config.sass.load_paths << "#{Rails.root}/vendor/assets/frameworks/compass/stylesheets"
config.sass.load_paths << "#{Rails.root}/vendor/assets/frameworks/blueprint/stylesheets"

Put the ExtJS stylesheets (the ext4/default directory in the SDK) here:

vendor/assets/stylesheets/ext4/default/

Put my-ext-theme.scss into app/assets/stylesheets and use it like you normally would with rails. It will call this code:

@import 'ext4/default/all';

That will bring in all of the ExtJS definitions, and you should be on your way.