CODEWITHSUNDEEP
javascriptcsssassgulpgulp-sass
Elias
Elias

Reputation: 802

gulp-sass: how to disable adding of prefixes path of background-image

Hello to everyone!

I'm developing a web app, and using gulp-sass to compile my files into css.

Schematic Project structure:

build/
  -image.png
  -build.css
src/
  -app/
     -component_1/
        -component.scss

Inside component.scss:

div.component {
  background: url("/image.png") no-repeat center center;
}

Here is my gulp script, responsible for the compiling sass into css:

 gulp.task('sass', function () {
  return gulp.src("src/app/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./sass.compiled/"))
    .pipe(concatCss("build.css"))
    .pipe(gulp.dest("build"));
});

As the result: gulp-scss prepends background's url property with the path: 'component_1'. So instead of expected:

background: url("/image.png") no-repeat center center;

I get:

background: url("component_1/image.png") no-repeat center center;

Is there a way, I could make gulp-sass to prevent such behavior?

Upvotes: 0

Views: 687

Answers (1)

Sven Schoenung
Sven Schoenung

Reputation: 30564

It's not gulp-sass that is causing this, but gulp-concat-css. As the package description states:

Concatenates css files, bubbling up @import statements (as per the standard), and optionally rebasing urls and inlining local @import statements.

You need to disable the optional url rebasing. You can do so using the rebaseUrls option:

gulp.task('sass', function () {
  return gulp.src("src/app/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./sass.compiled/"))
    .pipe(concatCss("build.css", { rebaseUrls: false }))
    .pipe(gulp.dest("build"));
});

Upvotes: 2

Related Questions