Sencha touch 2.4.0 SASS compile error

Question

Environment:
Mac OSX Mavericks 10.9.4
Compass 1.0.1 (Polaris)
Compass-blueprint (1.0.0)
Sass 3.4.5 (Selective Steve)
sencha app build testing command no error

When I compile app.scss file in the ./resources/sass/ directory, an error happened.

compass compile app.scss
    error app.scss (Line 209 of /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/touch/resources/themes/stylesheets/sencha-touch/base/src/_Class.scss: File not found or cannot be read: /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/resources/sass/fonts/pictos/pictos-web.woff)
File not found or cannot be read: /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/resources/sass/fonts/pictos/pictos-web.woff

And then I copy touch/resources/themes/fonts folder to resources/sass/ folder and then this error fixed.
But I doubt why this will happen when in the version 2.3.2 ( sencha touch) I have used compass to compile correctly.

Then there is another error:

compass compile app.scss
error app.scss (Line 42 of /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/touch/resources/themes/stylesheets/sencha-touch/base/src/_ProgressIndicator.scss: Undefined mixin 'experimental'.)
Sass::SyntaxError on line ["42"] of /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/touch/resources/themes/stylesheets/sencha-touch/base/src/_ProgressIndicator.scss: Undefined mixin 'experimental'.
Run with --trace to see the full backtrace

And now I can't fix it.

This is the content of app.scss:

// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

// Custom code goes here..

// Examples of using the icon mixin:
// @include icon('user');

config.rb:

# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)

# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', 'touch', 'resources', 'themes')

# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")

# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
output_style = :compressed
environment = :production

Do you use Sencha Cmd? With Cmd you should not need to go down to compass but you would run sencha app build or sencha ant sass. — Saki
@Saki Yes, sencha ant sass it works. but i don't know compass doesn't work now when I used it correctly when the sencha is 2.3.2 — icese7en
@Saki thank you anyway. I saw an official paper about this problem, but I have did compass compile right when the version is 2.3.0, now it's not work. — icese7en
Please put it in answer as Saki informed, there in no need to run 'compass watch' as rather run 'sencha ant sass' or 'sencha app build' from root path of application. @Saki Thank you :) — Akshay
go for 'sencha app watch' cmd from 2.4.0 onwards, from root dir of your application, it will do continuous check as earlier used to done by 'compass watch' cmd in sass file. — Akshay

icese7en icese7en · Accepted Answer · 2014-10-06T12:58:44

Thanks to @Saki . I pick one sentence from sencha official blog to help other people meet this problem:

With the introduction of Ext JS 4.2 and theme packages, compass watch no longer understood the structure of themes making “sencha ant sass” the only option for building Sass. The “sass” build step, however, was a forced, full rebuild and was many times slower than compass watch.

This is the link: http://www.sencha.com/blog/using-the-new-app-watch-command-in-sencha-cmd-4/

Sencha touch 2.4.0 SASS compile error

1 Answers