Problem generating sprites with Compass and Sencha Command

[r.binna]

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:

[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

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

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"

@import "IconsContainingPackage/icons/*.png"

• switch into the directory of application "applications/TestApp"
• Execute the build command

sencha -debug app build

• The essential part of the Output is as follows:

[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.

[Kupuyc]

I have same issue:

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

x-compass-compile doesn't support the "imagesdir" attribute

[r.binna]

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.

[mitchellsimoens]

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

[al.todd]

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

[Phantoll]

bump ++

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

[chanand]

"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;

[parasharsh]

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