SASS Config Errors Right Out of Box
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:
My sencha-touch.scss 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
The error I receive when I begin watching with SASS looks like this:
And, finally, if I begin to edit sencha-touch.scss I get an error that 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 the sencha-touch.css file then begins like this:
error /path-to-my-project-directory/Site_Sencha/www/resources/sass/sencha-touch.scss (Line 4: Undefined mixin 'sencha-panel'.)
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.
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
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;"; }
Thanks so much in advance.