search

Home  >  Q&A  >  body text

javascript - url problem after Gulp-clean-css compilation

A problem occurs after using gulp to compress CSS. The file directory is as follows:

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

A certain style in main.css:

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

import.css:

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

Now compile with gulp:

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

One problem that exists now is that the compiled css is all in import.css. At this time, the correct path of the url should be
url('../images/header.png'), but it is still ('../../images/header.png'), the corresponding image resource cannot be found.

After

, use the absolute path, url('/static/src/images/header.png') in src, but after compilation, the correct url should be url('/static/dist/images/header.png').

How to switch the URL correctly when using gulp-clean-css?

Thanks.

世界只因有你世界只因有你2863 days ago783

reply all(1)I'll reply

  • 巴扎黑

    巴扎黑2017-05-19 10:09:05

    gulp-clean-css is just a gulp plug-in, which uses clean-css internally, so you can go to the clean-css project homepage to find solutions:

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

    There is a relevant solution in the How to process remote @imports correctly? chapter, which seems to be a common problem.

    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.

    Add a parameter:

    { inline: ['remote'] }
    

    reply
    0
  • Cancelreply