Javascript – URL-Problem nach der Gulp-Clean-CSS-Kompilierung

Question

Nach der Verwendung von gulp zum Komprimieren von CSS ist ein Problem aufgetreten. Das Dateiverzeichnis lautet wie folgt:

    static/
        src/
            images/
                header.png
            css/
                pages/
                    main.css
                    xxx.css
                import.css
        dist/
            

Ein bestimmter Stil in

main.css:

    .header-area {
        background: url('../../images/header.png')
    }

import.css:

   @import pages/main.css
   @import pages/xxx.css

Jetzt zur Schluck-Zusammenstellung:

    gulp.task('minifycss', function(){
        gulp.src('src/css/**/*.css')
            .pipe(cleanCss())
            .pipe(concat(import.css))
            .pipe(gulp.dest('dist/css/'))
    })

Ein Problem besteht jetzt darin, dass sich das kompilierte CSS vollständig in import.css befindet. Zu diesem Zeitpunkt sollte der korrekte Pfad der URL
url('../images/header.png') lauten, aber jetzt ist er immer noch (' .. /../images/header.png'), kann die entsprechende Bildressource nicht gefunden werden.

Verwenden Sie nach

den absoluten Pfad url('/static/src/images/header.png') in src, aber nach der Kompilierung sollte die korrekte URL url('/static/dist/images/header.png') sein.

Wie ändere ich die URL richtig, wenn ich gulp-clean-css verwende?

Vielen Dank.

Answer 1

gulp-clean-css 只是一个 gulp 的插件，内部使用了clean-css，因此可以去 clean-css 项目主页找解决方案：

https://github.com/jakubpawlo...

正好在 How to process remote @imports correctly? 章节就有相关解决方案，看来是个常见问题啊。

In order to inline remote @import statements you need to provide a
callback to minify method as fetching remote assets is an asynchronous
operation, e.g.:

var source = '@import url(http://example.com/path/to/remote/styles);';
new CleanCSS({ inline: ['remote'] }).minify(source, function (error, output) {
  // output.styles
});

f you don't provide a callback, then remote @imports will be left as
is.

加一个参数：

{ inline: ['remote'] }