Hybrid View

  1. #1
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Vote Rating
    2
    Albareto is on a distinguished road

      0  

    Default 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:

    Code:
    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
    Code:
    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)

    Code:
    # 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

    Code:
    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

    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
    );
    I have a definition of panel like this:

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

    Code:
    compass compile
    Output of the command:

    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
    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:

    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;
    }
    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.

  2. #2
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,367
    Vote Rating
    136
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


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

    ?
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  3. #3
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Vote Rating
    2
    Albareto is on a distinguished road

      0  

    Default


    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?

  4. #4
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Vote Rating
    2
    Albareto is on a distinguished road

      0  

    Default


    Has someone at least tried to reproduce this?

  5. #5
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Vote Rating
    2
    Albareto is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,367
    Vote Rating
    136
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    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!
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  7. #7
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Vote Rating
    2
    Albareto is on a distinguished road

      0  

    Default


    This part is still happening:

    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
    );
    I have a definition of panel like this:

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

    Code:
    compass compile
    Output of the command:

    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
    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?

Thread Participants: 1

Tags for this Thread