Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

StaticImagePath in SCSS file #64

Open
sdylka opened this issue Feb 23, 2015 · 3 comments
Open

StaticImagePath in SCSS file #64

sdylka opened this issue Feb 23, 2015 · 3 comments
Assignees
Labels

Comments

@sdylka
Copy link

sdylka commented Feb 23, 2015

Hi,
unfortunately I have to open up an solved issue (#60) due to a incorrectly generated imagepath.
I have following gruntfile setup:

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

The imgPath I get in the generated scss-file is following:

%icon_scss {
    background: url("../images/icon.png/web/images/icon.png") no-repeat;
 }

what I would like to have in the SCSS (an later on as well in CSS) is:

%icon_scss {
    background: url("../images/icon.png") no-repeat;
 }

I'm using v 0.3.53. Sorry for bothering with this one once again.

@antonia-rose
Copy link

Hi, we looked a bit deeper in this problem. staticImagePath works great and does what we expect, but our sprite image isn't at the path, we defined. The example from https://github.com/asciidisco/grunt-imagine#staticimagepath would work, like its described, because the background-url would be 'public/img/src/img/icons36.png' but we need 'public/img/icon36.png'

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

because the path is builded with staticImagePath + spriteMap. But the file is generated with spriteMap, so it is in our root folder and not in ../images.

I would expect, that following definition would generate a correct sass file and correct image:

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

in sass you should have background: url('../images/icon.png') and our file would have a path lik web/images/icon.png. So we should extract all letters before last / in function generateBackgroundImagePath() and use this for generating the url path.

@LaurentGoderre LaurentGoderre self-assigned this Mar 9, 2015
@antonia-rose
Copy link

Hi, what's the status here?

@asciidisco
Copy link
Owner

I would appreciate a Pull Request, as I have no time to take care of that atm.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants