如何自动更新相对CSS路径的缩小

Question

我想更新所有的相对路径进行缩小，因为我为每个JS/CSS组件使用单独的文件夹，文件夹深度也可以为每个组件不同，例如:

css/
    style.min.css // final minified and processed file
    common.scss
    components/
        gallery/
            gallery.scss // url(../../../img/mypic.png)
img/
    mypic.png

缩小后，我的风格在style.min.css将仍然有../../../img/mypic.png。但是，它必须更新到../img/mypic.png，否则浏览器将无法找到图片。

如何使用PostCSS或其他包自动执行此操作?

我找到了postcss-url项目，它提供了一个自定义URL转换的函数，但我没有找到任何示例如何做到这一点。

现在我使用gulp, nodejs, autoprefixer和postcss来缩小。

Answer 1

在postcss-url中有一个名为url的参数，可用于将自定义函数传递给postcss-url。这个函数将能够修改postcss-url的url，但是代码必须手工编写。下面是我在我的项目中使用的:

var outDir = './src/css'; // output folder for CSS
gulp.task('min:css', function () {
    return gulp
        .src(cssInput)
        .pipe(postcss([
            autoprefixer(),
            postcssurl({
                // this function will modify URLs
                url: function (asset) {
                    if (!asset.url || asset.url.indexOf("base64") !== -1) {
                        return asset.url;
                    }
                    return path.relative(outDir, asset.absolutePath).split("\").join("/");
                }
            })
        ]))
        ...
});