1
votes

I'm new to sencha touch and trying to use sass and compass.. I installed everything and setup everything BUT while trying to compile the application.scss file i gets the following message:

{:cache_location=>"/Users/EladG/Sites/Pt4u/resources/scss/.sass-cache", :sass=> 
{:cache_location=>"/Users/EladG/Sites/Pt4u/resources/scss/.sass-cache", :cache=>true,  
:line_comments=>false, :style=>:compressed, :load_paths=>
[#<Sass::Importers::Filesystem:0x10a58e548 @root="/Users/EladG/Sites/Pt4u/resources/scss">, 
#<Sass::Importers::Filesystem:0x10a58e520 @root="/Library/Ruby/Gems/1.8/gems/compass-0.12.alpha.4
/frameworks/blueprint/stylesheets">, #<Sass::Importers::Filesystem:0x10a58e430 @root="/Library
/Ruby/Gems/1.8/gems/compass-0.12.alpha.4/frameworks/compass/stylesheets">, 
Compass::SpriteImporter]}, :sass_files=>nil}
***error application.scss (Line 5: File to import not found or unreadable: sencha-touch/default/all.***
Load paths:
    /Users/EladG/Sites/Pt4u/resources/scss
 /Library/Ruby/Gems/1.8/gems/compass-0.12.alpha.4/frameworks/blueprint/stylesheets
/Library/Ruby/Gems/1.8/gems/compass-0.12.alpha.4/frameworks/compass/stylesheets
Compass::SpriteImporter)
Sass::SyntaxError on line 5 of /Users/EladG/Sites/Pt4u/resources/scss/application.scss: File to 
import not found or unreadable: sencha-touch/default/all.
Load paths:
/Users/EladG/Sites/Pt4u/resources/scss
/Library/Ruby/Gems/1.8/gems/compass-0.12.alpha.4/frameworks/blueprint/stylesheets
/Library/Ruby/Gems/1.8/gems/compass-0.12.alpha.4/frameworks/compass/stylesheets
Compass::SpriteImporter
Run with --trace to see the full backtrace

The ruby file:

# Delineate the directory for our SASS/SCSS files (this directory)
sass_path = File.dirname(__FILE__)

# Delineate the CSS directory (under resources/css in this demo)
css_path = File.join(sass_path, "..", "css")

# Delinate the images directory
images_dir = File.join(sass_path, "..", "img")

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

# Specify the output style/environment
output_style = :compressed
environment = :production

The application.scss file:

@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-toolbar-forms;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-loading-spinner;

// 3. Define custom styles (can use SASS/Compass), example:
// .mybox {
//     @include border-radius(4px);
// }
//$frame-base-color:#333;
@include pictos-iconmask(‘wifi’);

the url of my project: /Users/EladG/Sites/Pt4u

the url of sencha library: /Users/EladG/Sites/sencha-touch-1.1.0/resources/themes/stylesheets/sencha-touch/default

Thanks,

1

1 Answers

5
votes

Compass can't find sencha-touch/default/all

Sass::SyntaxError on line 5 of /Users/EladG/Sites/Pt4u/resources/scss/application.scss: File to 
import not found or unreadable: sencha-touch/default/all.

You need to adjust your load path in the config.rb. I'm assuming Pt4u looks like this:

Pt4u
--scss
----config.rb
----application.scss
--css

You would then load sencha in the config.rb using:

load File.join(sass_path, '..', '..', 'sencha-touch-1.1.0', 'resources', 'themes')

Think of using File.join like you are using cd on the command line. "Start in the sass_path, go up one directory to Pt4u, go up one directory to Sites, go into sencha-touch-1.1.0, go into resources, go into themes"