Problems compiling sass file: Theme image not found + incorrect url in generated css

[Albareto]

I am working in a Windows 7 64bit machine, with ExtJS 4.1.2a and CMD v3

I have just generated a new application:

generate app -p D:\development\git\ExtJS4\Core\webapp\src\main\webapp\javascript\test - n testapp

then I go to the sass folder of the generated application

cd D:\development\git\ExtJS4\Core\webapp\src\main\webapp\javascript\test\resources\sass\default

this is my config.rb (only changed the output_style and the environment)

# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)
$ext_path = File.join(dir, '..', '..', '..', 'ext')

# Load the extjs framework automatically.
load File.join($ext_path, '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 = :expanded
environment = :development

I run

compass compile

It compiles my css file correctly, no warnings or anything.

Then I add the following in the app.scss taken from the Theming Guide in http://docs.sencha.com/ext-js/4-1/#!/guide/theming

@import 'compass';
@import 'ext4/default/all';

// Your custom code goes here...

@include extjs-panel-ui(
    'testapp', //changed to my own one, as some other colors down there...

    $ui-header-font-size: 12px,
    $ui-header-font-weight: bold,
    $ui-header-color: white,
    $ui-header-background-color: red,
    $ui-header-background-gradient: null,

    $ui-border-color: black,
    $ui-border-radius: 4px,
    $ui-body-background-color: #fff,
    $ui-body-font-size: 14px
);

I have a definition of panel like this:

Ext.define('Testapp.Panel',
{
    extend : 'Ext.panel.Panel',
    alias : 'widget.app-panel',
    ui : 'testapp',
    //more code here...
});

then I run again

compass compile

Output of the command:

WARNING: @theme-background-image: Theme image not found:
D:/development/git/ExtJS4/Core/webapp/src/main/webapp/javascript/test/resources/sass/default/../..
/../ext/resources/themes/images/default/panel-header/panel-header-testapp-collapsed-left-sides.gif
         on line 18 of 
D:/development/git/ExtJS4/Core/webapp/src/main/webapp/javascript/test/ext/resources/themes
/stylesheets/ext4/default/mixins/_theme-background-image.scss

And the same for several images (actually one warning per image in that folder).

The folder paths are correct but the image names are not: panel-header-testapp-collapsed-left-sides.gif does not exist but panel-header-default-collapsed-left-sides.gif does.
So the name of my application is not correctly added to the files, or they are not correctly copied with the correct name of who knows what is going there but the images are not generated, the styles they are (so I can see the red header and so on)

Also in the generated css file I can see lines like this:

/* line 168, ../../../ext/resources/themes/stylesheets/ext4/default/mixins/_frame.scss */
.x-nbr .x-panel-header-default-framed-top-ml,
.x-nbr .x-panel-header-default-framed-top-mr {
  zoom: 1;
  background-image: url('D:/development/git/ExtJS4/Core/webapp/src/main/webapp/javascript/test/resources/sass/default/../../../ext/resources/themes/images/default/panel-header/panel-header-default-framed-top-sides.gif');
  background-position: 0 0;
}

which is really wrong, browser does not find that images, they should be relative to the server, not to the file system, is there any configuration setting for this?

So two questions here:

1) What I am missing to get the images correctly "pathed" when I compile?
2) How can I tell the compiler to make the path relative to the css folder and not absolute related to the File System?

Any help is very appreciated.

[dongryphon]

This sounds like the same bug as http://www.sencha.com/forum/showthre...ence-to-images

?

[Albareto]

I don't know if it is exactly the same, he is complaining about absolute paths but to the server while in my case they point directly to the File System (D:\development\........\myImage.png)

Also I didn't see in his post anything regarding the warnings I am getting due to the ui setting, maybe I missed something.

And this is not happening when deploying the application, just when trying to compile the sass files in a test environment. As the other user (YomeKitsuma) I am also a supported user, shall I create a ticket for this?

[Albareto]

Has someone at least tried to reproduce this?

[Albareto]

I opened a ticket for this but it was closed because beta things cannot be "ticked", that's fine but then nobody comes here to reply so what am I supposed to do? Is this behavior a bug or is it that I am doing something wrong? In case it is a bug, is there someone working on it? Can someone provide some info on the progress of this?

I am not asking for an immediate solution to this, just for some information.

[dongryphon]

This is hopefully resolved with the latest build just released today. Please see if the new build resolves the problem and let us know if you still are seeing issues.

Thanks!

[Albareto]

This part is still happening:

@import 'compass';
@import 'ext4/default/all';

// Your custom code goes here...

@include extjs-panel-ui(
    'testapp', //changed to my own one, as some other colors down there...

    $ui-header-font-size: 12px,
    $ui-header-font-weight: bold,
    $ui-header-color: white,
    $ui-header-background-color: red,
    $ui-header-background-gradient: null,

    $ui-border-color: black,
    $ui-border-radius: 4px,
    $ui-body-background-color: #fff,
    $ui-body-font-size: 14px
);

I have a definition of panel like this:

Ext.define('Testapp.Panel',
{
    extend : 'Ext.panel.Panel',
    alias : 'widget.app-panel',
    ui : 'testapp',
    //more code here...
});

then I run again

compass compile

Output of the command:

WARNING: @theme-background-image: Theme image not found:
D:/development/git/ExtJS4/Core/webapp/src/main/webapp/javascript/test/resources/sass/default/../..
/../ext/resources/themes/images/default/panel-header/panel-header-testapp-collapsed-left-sides.gif
         on line 18 of 
D:/development/git/ExtJS4/Core/webapp/src/main/webapp/javascript/test/ext/resources/themes
/stylesheets/ext4/default/mixins/_theme-background-image.scss

And the same for several images (actually one warning per image in that folder).

The folder paths are correct but the image names are not: panel-header-testapp-collapsed-left-sides.gif does not exist but panel-header-default-collapsed-left-sides.gif does.
So the name of my application is not correctly added to the files, or they are not correctly copied with the correct name of who knows what is going there but the images are not generated, the styles they are (so I can see the red header and so on)

With the new version I can see images, so the paths are corrected, but I still get this warnings.

What's expected here?