Issues of app.scss compile error in sencha touch

Question

In my windows machine, i installed java, sencha cmd, sencha doc, ruby, compass and i generated one sencha application in that i try to compile app.scss file using the compass compile command but it gives the following error in command prompt:
when i run compass compile command it deletes app.css file and gives following error.

C:\wamp\www\sass\resources\sass>compass compile
modified config.rb
clean C:/wamp/www/sass/resources/css
delete C:/wamp/www/sass/resources/css/app.css
DEPRECATION WARNING on line 1, column 7 of C:/Ruby22-x64/lib/ruby/gems/2.2.0/gem s/compass-core-1.0.3/stylesheets/compass/css3/_shared.scss: Unescaped multiline strings are deprecated and will be removed in a future versi on of Sass. To include a newline in a string, use "\a" or "\a " as in CSS.

WARNING: The compass/css3/shared module has been deprecated. You can silence this warning by importing compass/css3/deprecated-support instea d. Please be aware that module will be removed in the next release. on line 1 of C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/ stylesheets/compass/css3/_shared.scss from line 3 of C:/wamp/www/sass/touch/resources/themes/stylesheets/senc ha-touch/_base.scss from line 22 of C:/wamp/www/sass/touch/resources/themes/stylesheets/sen cha-touch/_default.scss from line 4 of C:/wamp/www/sass/resources/sass/app.scss

DEPRECATION WARNING on line 87 of C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass -core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss: #{} interpolation near operators will be simplified in a future version of Sass. To preserve the current behavior, use quotes:

unquote('"$moz-"#{$experimental-support-for-mozilla} "$webkit-"#{$experimental -support-for-webkit} "$opera-"#{$experimental-support-for-opera} "$microsoft-"#{ $experimental-support-for-microsoft} "$khtml-"#{$experimental-support-for-khtml} ')

You can use the sass-convert command to automatically fix most cases.

DEPRECATION WARNING on line 92 of C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass -core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss: #{} interpolation near operators will be simplified in a future version of Sass. To preserve the current behavior, use quotes:

unquote('"$ie6-"#{$legacy-support-for-ie6} "$ie7-"#{$legacy-support-for-ie7} " $ie8-"#{$legacy-support-for-ie8}')

You can use the sass-convert command to automatically fix most cases.

WARNING: The compass/css3/box module is DEPRECATED and will be removed in the ne xt release. Please use compass/css3/flexbox instead. on line 4 of C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/ stylesheets/compass/css3/_box.scss from line 4 of C:/wamp/www/sass/touch/resources/themes/stylesheets/senc ha-touch/_base.scss from line 22 of C:/wamp/www/sass/touch/resources/themes/stylesheets/sen cha-touch/_default.scss from line 4 of C:/wamp/www/sass/resources/sass/app.scss
error app.scss (Line 6 of C:/wamp/www/sass/touch/resources/themes/stylesheet
s/sencha-touch/_base.scss: File to import not found or unreadable: blueprint/typ ography. Load paths: Compass::SpriteImporter
C:/wamp/www/sass/resources/sass
C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets C:/wamp/www/sass/touch/resources/themes/vendor/compass-recipes/stylesheets C:/wamp/www/sass/touch/resources/themes/stylesheets) Sass::SyntaxError on line ["6"] of C: File to import not found or unreadable: bl ueprint/typography. Load paths: Compass::SpriteImporter
C:/wamp/www/sass/resources/sass
C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets C:/wamp/www/sass/touch/resources/themes/vendor/compass-recipes/stylesheets C:/wamp/www/sass/touch/resources/themes/stylesheets Run with --trace to see the full backtrace

C:\wamp\www\sass\resources\sass>

Here sass is my folder name in www folder. my app.scss file is as following

// 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');
.abc
{
    color: #fff;
}

my config.rb file is as following

# 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

path of sencha sdk is as following

C:\wamp\www\sencha-touch-2.4.2-gpl\touch-2.4.2

The only error I see here is that you're trying to import files that don't exist (eg. blueprint). Do you have blueprint installed? — cimmanon
No. I don't install any blueprint and i also tried in another windows laptop the same problem occurs. — user3216114
How do you expect you're going to get a different result if you don't have blueprint installed? — cimmanon

Jeff Martin Jeff Martin · Accepted Answer · 2016-04-01T19:09:17

Compass is included in the Sencha CMD installation. You can compile the CSS by executing the command sencha ant sass from your application folder.

Issues of app.scss compile error in sencha touch

1 Answers