Relative path in the scss file

[danyeah]

Hello
This is my config

var svgConfig = {
	log: 'debug',
	mode : {
		css : {
			dest : '.',
			sprite : svgFolder + '/sprite.svg',
			render : {
				css :false,
				scss : {
					dest :  scssFolder + '/helpers/_sprite.scss'
				},
			},
			prefix: '.icon--%s',
			bust: false
		},
		symbol: {
			example: true,
			dest: svgFolder + '/symbol'
		}
	}
};

gulp.task('sprite', function() {
	return gulp.src(svgFolder + '/sources/*.{svg,SVG}')
	.pipe(svgSprite(svgConfig))
	.pipe(gulp.dest('.'));
});

sprite.svg is saved inside /svg/ and any svg we add are added into /svg/sources/ and the generated scss is placed into /scss/helpers/ everything as expected except the path the scss is specifying in the %svg-common rule which is:
%svg-common { background: url("svg/sprite.svg") no-repeat; }
Instead should be url('../svg/sprite.svg') because the generated css file is into /css/
Can't figure out how to fix this.

Any help is much appreciated.

[danyeah]

No answers?

[jkphl]

@DanielHQ I'm sorry but I'm extremely overloaded these days and simply don't find any time to dig into this at the moment. :( One question though: Have you read the doc section about output destinations and pre-processors?

[danyeah]

Yes I did read the docs, but its not very clear or im missing something sorry.

Ill try something again soon, I'm overloaded as well :( so Ill let you know!
Thanks.

[dertuerke]

need help too
i want add another path inside the scss file for the svg

[Gl-awog]

same here. relative path isn't generated in
%svg-common {
background: url("images/svg_sprite-d02ec200.svg") no-repeat;
}

must be

%svg-common {
background: url("../images/svg_sprite-d02ec200.svg") no-repeat;
}

no answers for year? documentation doesnt' have a word about it

[jkphl]

@Gl-awog The relative path used for the sprite is nothing but a matter of correct configuration and it's working for thousands of users. I'm sorry but I'm not able to deep-dive into particular projects (even if you had provided any configuration details) and figure out the proper configuration for your individual setup. Please get familiar with the output destination logic to control the relative path in the stylesheet.

[Gl-awog]

the creation of svg sprite and sass stylesheet works fine, they are generated in different folders, i don't have problems with that. I have a problem with the name of a path which points where a svg-sprite will be created, this path url is copied to css/sass stylesheet just like it is. There's a need for an extra feature - to be able to write any path-string to svg sprite in a stylesheet while the svg sprite is generated where 'sprite' points.

gulp.task('svg_sprite_generation', function(){
	return gulp.src('app/images/svg/*.svg')
	.pipe(svgSprite({	
		mode: {
		  css: {			
			dest : '.',
                        sprite : 'images/svg_sprite.svg',		
			render: {			  	
			    scss : { 
                                  dest : 'styles/sass/partials/svg_sprite.scss',
                            } 
			}
		    }
		}
	}))
	.pipe(gulp.dest('app'));
 }); }); 

in app/styles/sass/partials/svg_sprite.scss I have

%svg-common {
	background: url("images/svg_sprite-d02ec200.svg") no-repeat;
}

the sprite is generated in app/images/svg_sprite.svg,
and scss in app/styles/sass/partials/svg_sprite.scss.

But when I compile scss to dist/css and copy the sprite to dist/images, this link won't work.
i want to be able to change that url string, just adding an extra string pathincss

mode: {
		  css: {			
			dest : '.',
                       pathincss:"../anything/images",
                        sprite : 'images/svg_sprite.svg',		
			render: {			  	
			    scss : { 
                                  dest : 'styles/sass/partials/svg_sprite.scss',
                            } 
			}
		    }
		}

woud give

%svg-common {
	background: url("../anything/images/svg_sprite-d02ec200.svg") no-repeat;
}

[jkphl]

In general, I understand your troubles because all the paths are definitely not an easy thing to wrap ones head around, I know. However, I consider adding yet another configuration option (to the already overwhelming amount of options) as not reasonable either, especially because things should already work when used correctly.

But when I compile scss to dist/css and copy the sprite to dist/images, this link won't work.

I suppose this to be the problematic part. Let me scrutinize your config.

1. You decide to use /whatever/path/to/app to be the main output destination for all the whole Gulp run. (When using Gulp, this is actually the last thing you decide by using gulp.dest('app')).
2. With dest you could have specified a subdirectory as the base for all the svg-sprite action, but you didn't use that one so it defaults to '.'.
3. Additionally, with mode.css.dest = '.', you specify that the base path for all CSS related resources should also be the app directory itself (it could also be somewhere below that directory ...).
4. With mode.css.sprite = 'images/svg_sprite.svg' you specify the target sprite's location relative to the CSS base directory (stated in the docs) — as the sprite will be used from within the final CSS resources, so any other way of expressing its location would be useless (besides an absolute path of course).
5. With mode.css.render.scss.dest you specify where your intermediate SCSS resource should be created. This one is relative to your main output destination (see 1). Furthermore, it's completely up to you to ensure that the final compiled CSS ends up at the location that you specified as CSS base directory (see 3).

So, given your configuration I'd expect this to happen:

app
|-- images
|   `-- svg_sprite.svg
|-- styles
|   `-- sass
|       `-- partials
|           `-- svg_sprite.scss
`-- svg_sprite.css

Of course, svg_sprite.css would / should only be created by your SASS compile chain and not by svg-sprite itself. The relative path to the sprite inside the CSS file should be "images/svg_sprite.svg" — which would be correct as far as I understand. Please correct me if that is not the case. If it is, however, I don't see any need for another option to explicitly specify the sprite path.