Gulp 和相对路径问题答案

【问题标题】：Gulp and relative paths issueGulp 和相对路径问题
【发布时间】：2019-03-16 18:46:46
【问题描述】：

我有这个 gulp 任务用于我的 scss 到 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 的转换过程中会发生这样的变化以及如何防止它。

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

【问题讨论】：

标签： css sass gulp relative-path

【解决方案1】：

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

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

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

【讨论】：