Question

我有一个gulp任务，可以让我的scs生成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;
}

这些'../ ..'使我发疯：我不知道为什么在从scs到css的转换过程中我的相对路径会这样改变，以及如何防止这种情况。

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

Answer 1

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

Traceback (most recent call last):
File "d:\Test\test2.py", line 9, in <module>
obj.you()
 File "d:\Test\test2.py", line 7, in you
self.p("Ad")
TypeError: 'Logger' object is not callable

然后所有的URls将不会更改。

吞咽和相对路径问题

1 个答案: