javascript - problème d'URL après la compilation Gulp-clean-css

Question

Un problème est survenu après l'utilisation de gulp pour compresser CSS. Le répertoire des fichiers est le suivant :

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

Un certain style dans

main.css :

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

importer.css :

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

Maintenant, pour la compilation gulp :

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

Un problème maintenant est que le CSS compilé est entièrement dans import.css. À l'heure actuelle, le chemin correct de l'url devrait être
url('../images/header.png'), mais maintenant il est toujours ('. .. /../images/header.png'), la ressource image correspondante est introuvable.

Après

, utilisez le chemin absolu, url('/static/src/images/header.png') dans src, mais après compilation, l'URL correcte devrait être url('/static/dist/images/header.png').

Comment changer correctement l'URL lors de l'utilisation de gulp-clean-css ?

Merci.

Answer 1

gulp-clean-css n'est qu'un plug-in gulp, qui utilise clean-css en interne, vous pouvez donc accéder à la page d'accueil du projet clean-css pour trouver des solutions :

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

Il existe une solution pertinente dans le chapitre Comment traiter correctement les @imports distants, ce qui semble être un problème courant ?

Pour intégrer les instructions @import à distance, vous devez fournir un@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 @importsrappel pour réduire la méthode, car la récupération des ressources distantes est une
opération asynchrone, par exemple :

{ inline: ['remote'] }

si vous ne fournissez pas de rappel, alors le @imports distant sera laissé tel que

is.

#🎜🎜# #🎜🎜#Ajouter un paramètre : #🎜🎜# rrreee