Relative image paths in scss doesn't work for symfony projects

[antonia-rose]

I have following sprite-setup:

    sprites: {
        icon: {
            src: ['app/Resources/images/icon/*.png'],
            css: 'app/Resources/sass/icon.scss',
            map: 'web/images/icon.png',
            output: 'scss'
        }
    }

My scss-files compiled to 'web/css/*'. So my icon-image should be relative like ../images/icon.png, but now it's url("../../../web/images/icon.png"). So my css-files doesn't find the icon-image.

[asciidisco]

What we could do is adding a relativePathproperty.
If we would apply this for your example, it would look like:

    sprites: {
        icon: {
            src: ['app/Resources/images/icon/*.png'],
            css: 'app/Resources/sass/icon.scss',
            map: 'web/images/icon.png',
            relativePath: 'web/css',
            output: 'scss'
        }
    }

Then the output of the SCSS file could be changed to use that relative path instead of the path it generates per default:

// Now resolves from 'web/css' not ' 'app/Resources/sass/' but still taking
// the output path for the sprite map  'web/images/icon.png' into account
background: url("../web/images/icon.png")

Note: This line of code needs to be altered in order to do so

[antonia-rose]

Yeah, this would help. I think the main problem is the missing rb-file in grunt, where you could specifiy your target folders, that would make it easier.

Best (better) practise would be:

sprites: {
        icon: {
            src: ['app/Resources/images/icon/*.png'],
            css: 'app/Resources/sass/icon.scss',
            map: 'icon.png',
            imagePath: 'web/images', // user can specify relative or absolute path, like he want
            output: 'scss'
        }
    }

[asciidisco]

@soophie That would be even easier to implement.

[antonia-rose]

really? Oh, I want this :-)

[asciidisco]

@soophie
Implemented & releases as v0.3.5, could you please give it a try and report if it works (as I have no test data handy)?!

Docs are here: https://github.com/asciidisco/grunt-imagine#staticimagepath

[asciidisco]

Needed to fix something else, please use version 0.3.51 to try this.

[antonia-rose]

staticImagePath is now used in my scss-file but, the image itself is missing in my path. I only have url(../images/").

[asciidisco]

Please try with 0.3.53; x.x.51 & x.x.52 had some bugs related to this.