Question

我想替换像这样的css背景网址：

body {
  background: url("../common/images/image-1.jpg") center center;
}
.calss-1 { 
  background: url("./vau/image-2.png"); 
}
.class-2 { 
  background: url("./image-3.svg"); 
}
.class-3 {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==");
}

到这些：

body {
  background: url("../images/image-1.jpg") center center;
}
.class-1 { 
  background: url("../images/image-2.png"); 
}
.class-2 { 
  background: url("../images/image-3.svg"); 
}
.class-3 {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==");
}

gulp-replace有效javascript正则表达式的api，没有任何javascript函数。

这有效，但在base64编码图像中不算数：/$(.*\/)(.*?)$/g替换为("../images/$2)。

我想出了这个：/$([^(data)]*\/)(.*?)$/g问题是，捕获组搞砸了。

以下是您可以使用的示例：http://regexr.com/3cj57

Answer 1

RegExp是一种改变CSS的坏方法。使用特殊的CSS解析器是一种更好的方法。特别是因为它很容易。

您可以使用postcss-url插件并设置自定义回调来替换所有listView。

替换css background-url值

1 个答案: