I have spent a number of hours trying to get the Sencha Touch SASS setup properly and researching errors herein the forum and elsewhere. But I can't reach the first step in customization because of a sea of errors. And I really want to use SASS. I use it on other projects and it works great.

I would assume that simply downloading Sencha Touch and putting the /resources directory in my project directory would work out of the box. Alas, it does not. I have read Sencha's popular theming blog-post and subsquently changed the config.rb accordingly, yet that also throws errors.

My project directory looks like this:

My config.rb file looks like this:

sass_path = File.dirname(__FILE__)
css_path = File.join(sass_path, '..', 'css')
images_dir = File.join(sass_path, '..', 'themes', 'images')
load File.join(sass_path, '..', 'themes')
output_style = :compressed
environment = :production
My sencha-touch.scss file looks like this:

@import 'sencha-touch/default/all';

@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;
The error I receive when I begin watching with SASS looks like this:

WARNING: Neither sencha-touch/default/all.sass nor .scss found. Using sencha-touch/default/all.css instead.
This behavior is deprecated and will be removed in a future version.
If you really need sencha-touch/default/all.css, import it explicitly.
And, finally, if I begin to edit sencha-touch.scss I get an error that looks like this:

error /path-to-my-project-directory/Site_Sencha/www/resources/sass/sencha-touch.scss (Line 4: Undefined mixin 'sencha-panel'.)
And the sencha-touch.css file then begins like this:

Syntax error: Undefined mixin 'sencha-panel'.
on line 4 of /Users/markwyner/Documents/Gigs/PriceBox/Site_Sencha/www/resources/sass/sencha-touch.scss, in `sencha-panel'
from line 4 of /Users/markwyner/Documents/Gigs/PriceBox/Site_Sencha/www/resources/sass/sencha-touch.scss

body:before {
  white-space: pre;
  font-family: monospace;
  content: "Syntax error: Undefined mixin 'sencha-panel'.\A         on line 4 of /path-to-my-project-directory/Site_Sencha/www/resources/sass/sencha-touch.scss, in `sencha-panel'\A         from line 4 of /path-to-my-project-directory/Site_Sencha/www/resources/sass/sencha-touch.scss\A \A 1: $base-color: #333;\A 2: @import 'sencha-touch/default/all';\A 3: \A 4: @include sencha-panel;\A 5: @include sencha-buttons;\A 6: @include sencha-sheet;\A 7: @include sencha-picker;\A 8: @include sencha-tabs;\A 9: @include sencha-toolbar;"; }
Any help will be greatly appreciated. I would truly love any solid answer for this problem and am certain many others would benefit as well. It seems this is a common issue for people.

Thanks so much in advance.