Skip to content
New issue

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

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

Already on GitHub? Sign in 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.

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

No branches or pull requests

4 participants