Threaded View
-
2 Oct 2012 3:35 AM #1
Problems compiling sass file: Theme image not found + incorrect url in generated css
Problems compiling sass file: Theme image not found + incorrect url in generated css
I am working in a Windows 7 64bit machine, with ExtJS 4.1.2a and CMD v3
I have just generated a new application:
then I go to the sass folder of the generated applicationCode:generate app -p D:\development\git\ExtJS4\Core\webapp\src\main\webapp\javascript\test - n testapp
this is my config.rb (only changed the output_style and the environment)Code:cd D:\development\git\ExtJS4\Core\webapp\src\main\webapp\javascript\test\resources\sass\default
I runCode:# 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
It compiles my css file correctly, no warnings or anything.Code:compass compile
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
I have a definition of panel like this:Code:@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 );
then I run againCode:Ext.define('Testapp.Panel', { extend : 'Ext.panel.Panel', alias : 'widget.app-panel', ui : 'testapp', //more code here... });
Output of the command:Code:compass compile
And the same for several images (actually one warning per image in that folder).Code: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
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:
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?Code:/* 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; }
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.
Thank you for reporting this bug. We will make it our priority to review this report.


Reply With Quote