Gulp and relative paths issue

Question

I have this gulp task for my scss to css build (including merging with stand-alone .css files of other libraries):

var gulp = require('gulp'),
scss = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    merge = require('merge-stream'),
    concat = require('gulp-concat-css'),
    sourcemaps = require('gulp-sourcemaps'),
    cssmin = require('gulp-cssmin'),
    rename = require('gulp-rename');


gulp.task('scss', function () {
    var sass, css;

    sass = gulp.src('./scss/**/[^_]*.?(s)css')
        .pipe(sourcemaps.init())
        .pipe(scss({
             includePaths: [
                'node_modules/slick-carousel/slick'
            ]
        }).on('error', scss.logError))
        .pipe(autoprefixer({
            flexbox: true,
            grid: true,
            browsers: ['> 1%', 'last 5 years', 'Firefox > 20']
        }))
        .pipe(sourcemaps.write());

    // Add all the external css files
     css = gulp.src([
         'styles/styles-src/foxholder.min.css'
     ]);

    // Merge to styles.css and output to src
    return merge(sass, css)
        .pipe(concat('styles.css'))
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./styles/'));
});

And everything is OK with it, except one thing.

If I put in my scss file styles with relative path, like that:

div {
  background: url("/assets/icons/checked.svg") 50% 50% no-repeat;
}

it will be converted to css like this:

div {
  background: url(../../assets/icons/checked.svg) 50% 50% no-repeat;
}

And these '../..' driving me insane: I don't know why my relative paths are changed like this during the scss to css conversion and how to prevent it.

I'll be so glad if someone help me.

Answer 1

So the issue was with gulp-concat-css. It rebased relative URLs by default. To turn off this option we need to add:

.pipe(concat('styles.css', {rebaseUrls: false}))

And after that all the URls will no be changed.