gulp-sass: как отключить добавление префиксов пути к фоновому изображению

Всем привет!

Я разрабатываю веб-приложение и использую gulp-sass для компиляции моих файлов в css.

Схематическая структура проекта:

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

Внутри component.scss:

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

Вот мой скрипт gulp, отвечающий за компиляцию sass в 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"));
});

В результате: gulp-scss добавляет к свойству url фона путь: 'component_1'. Итак, вместо ожидаемого:

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

Я получил:

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

Есть ли способ сделать gulp-sass, чтобы предотвратить такое поведение?


javascript css sass gulp gulp-sass
person Elias    schedule 23.08.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это не gulp-sass вызывает это, а gulp-concat-css. Как указано в описании пакета:

Объединяет css-файлы, поднимает операторы @import (в соответствии со стандартом) и необязательно перемещает URL-адреса и встраивает локальные операторы @import.

Вам нужно отключить необязательное изменение URL-адреса. Это можно сделать с помощью параметра rebaseUrls:

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"));
});
person Sven Schoenung    schedule 23.08.2016
comment
Спасибо за Ваш ответ! - person Elias; 24.08.2016