Gulp 和相对路径问题

Question

我的 scss 到 css 构建有这个 gulp 任务（包括与其他库的独立 .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 转换期间我的相对路径会这样改变以及如何防止它。

如果有人帮助我，我会很高兴。

Answer 1

所以问题出在 gulp-concat-css 上。它默认重新设置相对 URL。要关闭此选项，我们需要添加：

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

之后所有的 URl 都不会改变。

Gulp 和相对路径问题

Gulp and relative paths issue

css

sass

relative-path

gulp