View Full Version : Theming with SASS

4 May 2012, 9:22 AM
I've been trying set up extjs to edit theme files with sass. I've set it up before on an old computer but it died and I'm trying to set up extjs with sass again but I've been running into this error for a few days and the documentation is severely lacking for helping set this up.

The error I receive is:

File to import not found or unreadable: ext4/default/all.
Load paths:

The ruby command I run is:
D:\work\Ruby\bin>compass watch resources

my directory structure is set up as



my config.rb in ruby/bin/resources/sass looks like:

# $ext_path: This should be the path of where the ExtJS SDK is installed
# Generally this will be in a lib/extjs folder in your applications root
# <root>/lib/extjs
$ext_path = "../../"

# sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder
# Generally this will be in a resources/sass folder
# <root>/resources/sass
sass_path = File.dirname(__FILE__)

# css_path: the directory you want your CSS files to be.
# Generally this is a folder in the parent directory of your Sass files
# <root>/resources/css
css_path = File.join(sass_path, "..", "css")

# output_style: The output style for your compiled CSS
# nested, expanded, compact, compressed
# More information can be found here http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style
output_style = :compressed

# We need to load in the Ext4 themes folder, which includes all it's default styling, images, variables and mixins
load File.join(File.dirname(__FILE__), $ext_path, 'resources', 'themes')

Are my paths incorrect? My directory structure?

Tim Toady
4 May 2012, 10:10 AM
Your ext path should be ../../extjs
Right now it appears to be a path to bin

4 May 2012, 10:14 AM
I've tried putting $ext_path = "../../extjs" and the error persist.

Tim Toady
4 May 2012, 11:14 AM
What does it output when you run compass compile from your sass directory?

4 May 2012, 11:22 AM
The output is:

Warning @theme-background-image: Theme image not found: ../../resources/themes/images/default/tree/elbow-line.gif
on line 18 of d:/work/Ruby/bin/resources/themes/stylesheets/exct4/default/mixins/_theme-background-image.scss
from line 99 of D:/work/Ruby/bin/resources/themes/stylesheets/ext4/default/_all.scss
from line 14 of D:/work/Ruby/bin/resources/sass/xt-standard.scss

It goes on and on for all the images.

Tim Toady
4 May 2012, 11:32 AM
Are you following http://docs.sencha.com/ext-js/4-1/#!/guide/theming ?
It has this line
"You will also need to copy the images from appname/extjs/resources/themes/images/default to appname/resources/images."

actually, on second look, that may not be it. I will comment again in a minute after I think about it and play around with theming because I don't set it up often. Do follow that specific guide though.

Tim Toady
4 May 2012, 11:57 AM
I am assuming the bug mentioned in the guide is still happening. Have you changed line 62 of lib/utils.rb as stated in the guide?

4 May 2012, 11:59 AM
placing the images directory into the resources directory prevents the errors from showing up when i run compass compile or compass watch. When I edit a scss file the css file comes out without looking like there aren't any errors but the warning for the missing images are still popping up in the command prompt.

4 May 2012, 12:13 PM
I changed the utils.rb file in bin/extjs/resources/themes/lib and there was no change to the missing image warning.
I tried the same change in bin/resources/themes/lib but it didn't change anything either.