javascript - masalah url selepas kompilasi Gulp-clean-css

Question

Masalah berlaku selepas menggunakan gulp untuk memampatkan CSS Direktori fail adalah seperti berikut:

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

Gaya tertentu dalam

main.css:

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

import.css:

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

Kini untuk kompilasi teguk:

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

Masalah sekarang ialah css yang dikompilasi semuanya dalam import.css Pada masa ini, laluan url yang betul hendaklah
url('../images/header.png'), tetapi sekarang ia masih ('. .. /../images/header.png'), sumber imej yang sepadan tidak dapat ditemui.

Selepas

gunakan laluan mutlak, url('/static/src/images/header.png') dalam src, tetapi selepas penyusunan url yang betul hendaklah url('/static/dist/images/header.png').

Bagaimana untuk menukar URL dengan betul apabila menggunakan gulp-clean-css?

Terima kasih.

Answer 1

gulp-clean-css hanyalah pemalam gulp, yang menggunakan clean-css secara dalaman, jadi anda boleh pergi ke halaman utama projek clean-css untuk mencari penyelesaian:

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

Terdapat penyelesaian yang relevan dalam bab Bagaimana untuk memproses jauh @import dengan betul, yang nampaknya merupakan masalah biasa.

Untuk menyelaraskan kenyataan @import jauh, anda perlu menyediakan@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 @importspanggilan balik untuk memperkecil kaedah kerana mengambil aset jauh ialah operasi
tak segerak, mis.:

{ inline: ['remote'] }

jika anda tidak memberikan panggilan balik, maka jauh @imports akan dibiarkan seperti

is.

🎜 🎜Tambah parameter: 🎜 rrreee