如何自动更新相对 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("/");
                }
            })
        ]))
        ...
});

如何自动更新相对 CSS 路径以进行缩小？

How to automatically update relative CSS paths for minification?

css

minify

node.js

gulp

postcss