Глоток и относительные проблемы пути - PullRequest
Новая
       15

Глоток и относительные проблемы пути

0 голосов
/ 11 октября 2018

У меня есть задание gulp для сборки scss to css (включая объединение с автономными файлами .css других библиотек): 

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/'));
});

И с этим все в порядке, кроме одного.

Если я добавлю стили моего файла scss с относительным путем, например: 

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

, он будет преобразован в css следующим образом: 

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

И эти«../ ..» сводит меня с ума: я не знаю, почему мои относительные пути так меняются во время преобразования scss в css и как его предотвратить.

Я буду так рад, если кто-топомоги мне.

1 Ответ

0 голосов
/ 11 октября 2018

Так что проблема была с gulp-concat-css .Он перебазировал относительные URL по умолчанию.Чтобы отключить эту опцию, нам нужно добавить: 

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

И после этого все URls не будут изменены.

...