Allow relative assets #6
Description
I ended up writing my own custom function to produce relative asset urls. It is possible due to this.options.file – the filepath of the Sass file being rendered – being available inside the function.
I will figure out how to apply it to this repo and submit a pull-request. In the meantime, the code is pasted below and an example project is available at https://github.com/henrahmagix/node-sass-relative-asset-url
Related to #5
var assetUrl = function (type, $assetPath) {
var assetsPathForType = {
image: 'app/media/images',
font: 'app/media/fonts'
};
if (!assetsPathForType[type]) {
throw new Error(`assetUrl: type ${type} not supported, must be one of ${Object.keys(assetsPathForType)}`);
}
var assetPath = $assetPath.getValue();
var sassFilepath = this.options.file;
// Since sassFilepath is a file, we need to normalise for
// directory relations.
var relativeToStylesRoot = path.relative(path.dirname(sassFilepath), 'sass');
var stylesRootToAssets = path.relative('app/styles', assetsPathForType[type]);
var stylesToAssetpath = path.join(relativeToStylesRoot, stylesRootToAssets, assetPath);
var urlString = `url('${stylesToAssetpath}')`;
return new sassTypes.String(urlString);
};
gulp.task('sass', () => {
return gulp.src('sass/**/*.sass')
.pipe(sass({
functions: {
'image-url($filepath)': function ($filepath) {
return assetUrl.call(this, 'image', $filepath);
},
'font-url($filepath)': function ($filepath) {
return assetUrl.call(this, 'font', $filepath);
}
}
}).on('error', sass.logError))
.pipe(gulp.dest('app/styles'));
});Input
// main.sass
body
background-image: image-url('myimage.png')// nested/nested.sass
.nested
background-image: image-url('nested/mynestedimage.png')Output
/* main.css */
body {
background-image: url('../media/images/myimage.png'); }/* nested/nested.css */
.nested {
background-image: url('../../media/images/nested/mynestedimage.png'); }