Results 1 to 8 of 8

Thread: Problem generating sprites with Compass and Sencha Command

    Success! Looks like we've fixed this one. According to our records the fix was applied for SDKTOOLS-635 in 5.0.3.
  1. #1
    Ext JS Premium Member
    Join Date
    Jun 2009
    Posts
    7

    Default Problem generating sprites with Compass and Sencha Command

    REQUIRED INFORMATION

    Sencha Cmd version(s) tested:
    • Sencha Cmd v4.0.0.203
    Operating System:
    • 64 bit - Linux - Fedora Core 19
    Framework used:
    • Ext JS 4.2.2.1144
    Description:
    • Creating sprite images with compass using sencha command is not possible. The reason for the problem is that the image search path is not set correct. This results ins spriting not working as well as Problems with using compass image-url function
    Diagnostic Output:
    The output from sencha app build:
    Code:
    [INF] executing compass using system installed ruby runtime
    [DBG] executing compass : ruby /opt/sencha/Sencha/Cmd/4.0.0.203/extensions/sencha-compass/gems/bin/compass compile --config /home/rbi/devel/repository/source/javascript/sencha/build/production/ControlExt/config.rb --css-dir /home/rbi/devel/repository/source/javascript/sencha/build/production/ControlExt/resources --sass-dir /home/rbi/devel/repository/source/javascript/sencha/build/production/ControlExt --force --trace
    Code:
    No files were found in the load path matching "SynExt/view/synicons16/*.png". Your current load paths are: /home/rbi/devel/repository/source/javascript/sencha/build/production/ControlExt/images [DBG] exit code was : 1 [DBG] exit code was : 1


    Steps to reproduce the problem:

    • Generate a dummy Project:
    • sencha generate workspace .
    • sencha generate package IconsContainingPackage
    • edit .sencha/app/sencha.cfg in IconsContainingPackage
    Code:
    package.sass.namespace=IconsContainingPackage
    • sencha -sdk frameworks/ext/4.2.2.1144/ generate app -path applications/TestApp -name TestApp
    • add the package "IconsContainingPackage" to the requires section in the app.json file in applications/TestApp
    • generate an images/icons folder in the resource folder of package "IconsContainingPackage"
    • add two png icons
    • add the following line to the all.scss file in package "IconsContainingPackage"
    Code:
    @import "IconsContainingPackage/icons/*.png"
    • switch into the directory of application "applications/TestApp"
    • Execute the build command
    Code:
    sencha -debug app build
    • The essential part of the Output is as follows:
    Code:
    [DBG] executing compass : ruby /opt/sencha/Sencha/Cmd/4.0.0.203/extensions/sencha-compass/gems/bin/compass compile --config /home/rbi/BugSamples/SenchaCmdSpritingImageProblem/build/production/TestApp/config.rb --css-dir /home/rbi/BugSamples/SenchaCmdSpritingImageProblem/build/production/TestApp/resources --sass-dir /home/rbi/BugSamples/SenchaCmdSpritingImageProblem/build/production/TestApp --force
    No files were found in the load path matching "IconsContainingPackage/icons/*.png". Your current load paths are: /home/rbi/BugSamples/SenchaCmdSpritingImageProblem/build/production/TestApp/images
    [DBG] exit code was : 1
    [DBG] exit code was : 1
    [ERR] 
    [ERR] BUILD FAILED
    The result that was expected:
    • The generation of a set of sprite images
    The result that occurs instead:
    • No files were found in the load path matching "IconsContainingPackage/icons/*.png".
    Possible Solution:
    From the output can be inferred that the compass image path is set to a non existing folder.
    This folder is build/production/TestApp/images. A possible solution could be to set the --image-dir commandline argument of the compass call to build/production/TestApp/resources/.
    This would allow to address sprite images with a path like "IconsContainingPackage/images/icons/*.png".
    In combination with a mixin called theme-image-url similar to the theme-background-image the image-url feature of compass as well as spriting could be incorporated into the sencha cmd build scheme.


    The complete sample application is attached but stripped from the ext frameworkSenchaCmdSpritingImageProblemStripped.zipoutput.log.zipPlease provide a workaround or fix, as this is currently a very serious problem.

  2. #2
    Sencha Premium Member
    Join Date
    Feb 2008
    Posts
    11

    Default

    I have same issue:

    Code:
    [INF] appending sass content to C:\temp\sprites/build/testing/TestApplication/TestApplication-all.scss
    [INF] executing compass using system installed ruby runtime
    No files were found in the load path matching "view/main/*.png". Your current load paths are: C:/temp/sprites/build/testing/TestApplication/images
    Seems like that x-compass-compile doesn't use any variables from config.rb and other places. How I can specify correct path?

    r.binna, you are wrote:
    A possible solution could be to set the --image-dir commandline argument of the compass call to build/production/TestApp/resources/.
    This would allow to address sprite images with a path like "IconsContainingPackage/images/icons/*.png".
    Could you tell how? I tried to patch sass-impl.xml (just for tests) but x-compass-compile doesn't support options such of imagesdir or imagedir:
    Code:
    x-compass-compile doesn't support the "imagesdir" attribute

  3. #3
    Ext JS Premium Member
    Join Date
    Jun 2009
    Posts
    7

    Default Workaround

    I was not able to set the image directory parameter as this is encapsulated within an ant task.

    For this reason I created a structure parallel to my sencha workspace with the following layout, where for each package a separate compass project is created:

    sprites/packageName/config.rb
    sprites/packageName/sass/view/.../Icons.scss
    sprites/packageName/images/view/..../icons/*.png
    sprites/packageName/css

    In the config.rb of each package I used the on_sprite_saved as well as the on_stylesheet_saved hooks.
    In the on_stylesheet_saved hook the generated css file is copied into the corresponding place in the sass folder of the package. The filextension is renamed to scss, the hash is stripped from the filename and all occurrences of the sprite url is replaced with a background-theme-image call.
    Furthermore in the on_sprite_saved handler the generated sprite image is copied into the resources folder of the package and the filename is stripped from the hash.

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448

    Default

    We have a bug open. I believe we got this to work manually but Cmd doesn't pass compass configs properly.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2013
    Location
    Yorkshire, UK
    Posts
    63

    Default

    bump.

    Is there an update on this - a bug to track perhaps?

    Bit of pain since we can't reuse the mixins created to create further css classes in our custom packages since we're generating the sprites outside of ext build.

    Cheers

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    9

    Default

    bump ++

    it`s realy irritating to handle it with photoshop....

  7. #7
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    40

    Default

    "According to our records the fix was applied for SDKTOOLS-635 in 5.0.3"

    So, how do we get it to work now on Sencha Cmd v5.1.0.26?

    I'm still getting the error:

    No files were found in the load path matching "icons/*.png". Your current load paths are: /.../build/images

    while my scss looks like:


    @import "compass/utilities/sprites";
    @import "icons/*.png";
    @include all-icons-sprites;

  8. #8
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    35

    Default Can someone please confirm whether this works with Sencha CMD 5.1.x ?

    Can someone please confirm whether this works with Sencha CMD 5.1.x and provide the steps please.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •