如何自动更新相对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

在url中有一个名为postcss-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("/");
                }
            })
        ]))
        ...
});