通过处理更改css文件位置后如何更改相对url

【问题标题】：How to change relative urls after the css file location has been changed by processing通过处理更改css文件位置后如何更改相对url
【发布时间】：2018-03-22 14:43:32
【问题描述】：

对于一个典型的 Web 项目，我们可以使用 gulp/webpack 将 js/css 打包（压缩）到 dest 目录。但是 images 不需要压缩。所以这会导致一个问题：如果我使用 background-image 之类的相对路径，图像和 css 之间的相对路径会发生变化background-image:url(images/header_title.jpg) 将获得 404。

其他网站对此有何处理？感谢您的任何建议！

【问题讨论】：

标签： node.js webpack gulp

【解决方案1】：

查看css-url-adjuster 或css-rebase-urls。例如，它们都会改变

background-image: url('coolImage.jpg');

到你指定的东西，例如：

background-image: url('/image_directory/coolImage.jpg?version=1');

[来自 gulp-css-url-adjuster 文档]。

您只需告诉插件您想要的新相对 url。

gulp.task('default', function () {
  return gulp.src('style.css')
    .pipe(urlAdjuster({
       replace:  ['/old/path','/new/path],
    }))
   .pipe(gulp.dest('modifiedStyle.css'));
});

【讨论】：