File to import not found or unreadable: recipes/background

Specs:

1. Mac OSX Lion 10.7.4
2. Compass version: Compass 0.12.1
3. SASS version: 3.1.19
4. sencha touch: sencha-touch-2.0.1.1
5. sencha command: v2.0.2

Hey Sencha folks I was wondering if anyone could help me with this problem I am having. In terminal while watching and compiling I get this error:

Error:
error sass/app.scss (Line 2 of sass/../../sdk/resources/themes/stylesheets/sencha-touch/default/core/../_mixins.scss: File to import not found or unreadable: recipes/background.

This is preventing me from modifying or creating my own themes and have went through similar problems on the forums with out any luck. If anyone can please take a look at this problem I am having that will be greatly appreciated. I am also providing my config.rb, scss and a screenshot of my project structure. Seems like the tutorials on the sencha site have different folder structures than the framework that I downloaded.

config.rb code

Code:

---

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


# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', 'sdk', '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

---

Import from sass/app.scss:

Code:

---

@import '../../sdk/resources/themes/stylesheets/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-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;


// test
$base-color: #000;
$active-color: #CCC;

---

Project Structure:
Attachment 36302

Try changing

Code:

---

@import '../../sdk/resources/themes/stylesheets/sencha-touch/default/all';

---

to

Code:

---

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

---

I had the same problem today.

The solution was that I forgot to update my config.rb file to 2.0.1.1

That's what I originally had and it gave me this error.

Code:

---

error sass/app.scss (Line 2: File to import not found or unreadable: sencha-touch/default/all.

---

Hey Marc-QNX, how do I update the config.rb to 2.0.1.1?

Ok folks don't know why this is giving me such a hard time. I have tried just about anything I could find online and on this forum with no luck. Please any help would be greatly appreciated.

Out of the box with sencha I get this in the config.rb

Code:

---

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


# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', 'sdk', '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

---

And in the app.scss I import the following:

Code:

---

@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-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;

---

The error I get from this is as follows:
error sass/app.scss (Line 2: File to import not found or unreadable: sencha-touch/default/all.


I noticed that the paths are different so I changed the import to this

Code:

---

@import '../../sdk/resources/themes/stylesheets/sencha-touch/default/all';

---

which resulted in this error:

Code:

---

error sass/app.scss (Line 2 of sass/../../sdk/resources/themes/stylesheets/sencha-touch/default/core/../_mixins.scss: File to import not found or unreadable: recipes/background.

---

Again really just want to start creating some cool stuff but I can't seem to get past this issue. Is there something I am missing here?

username$ compass watch
>>> Change detected at 00:55:51 to: app.scss
error sass/app.scss (Line 2 of sass/../../sdk/resources/themes/stylesheets/sencha-touch/default/core/../_mixins.scss: File to import not found or unreadable: recipes/background.
Load paths:
/Users/username/Sites/appName/resources/sass
/Users/username/.rvm/gems/ruby-1.9.3-p0/gems/compass-0.12.1/frameworks/blueprint/stylesheets
/Users/username/.rvm/gems/ruby-1.9.3-p0/gems/compass-0.12.1/frameworks/compass/stylesheets
Compass::SpriteImporter)
identical stylesheets/app.css
>>> Compass is polling for changes. Press Ctrl-C to Stop.

I'm not sure, but my download of ST2 doesn't have an sdk folder in it.

Attachment 36352

So, my config.rb in the resources/sass directory is :

Code:

---

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


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


# Compass configurations
sass_path    = dir
css_path    = File.join(dir, "..", "css")
environment  = :production
output_style = :compressed

---

Try running compass compile from that directory instead.

So for example I cd into the sencha framework and then when you generate a new project like this:

Code:

---

sencha generate app test_v1 ../test_v1

---

When you generate the app it creates the directory that contains the sdk directory.

I literally followed these sencha tutorials step by step.

1. http://docs.sencha.com/touch/2-0/#!/...etting_started

2. Then I tried following this tutorial to begin to add custom styles

3. http://docs.sencha.com/touch/2-0/#!/guide/theming

If anyone out there can provide some help that would be great.