javascript - Gulp-clean-css編譯後出現的url問題

Question

使用gulp進行css壓縮後出現一個問題，檔案目錄是這樣的：

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

main.css中的某個樣式：

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

import.css：

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

現在進行gulp編譯：

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

現在存在的一個問題就是，編譯後的css都在import.css中，這時url的路徑正確的應該是
url('../images/header.png')，但現在還是('../../images/header.png')，找不到對應的圖片資源。

後使用絕對路徑，在src中url('/static/src/images/header.png')，但編譯後url正確應為url('/static/dist/images/header.png')。

使用gulp-clean-css該如何把url正確切換過來呢？

謝謝。

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'] }