调试和发布中不同的css url

Question

我在css文件中有一个带有网址的网络应用程序。在生产中，我有一个优化的css文件，它位于相对于images文件夹的不同位置。 例如：

在发展中：

.someClass{
   background: url("../images/....);
}

在制作中：

.someClass{
   background: url("../../images/....);
}

显然，我希望这两种图像能够正常工作，是否有解决方案？ （除了确保css具有相同的相对位置）

Answer 1

您可以使用以相对斜杠（/）开头的根相对URL来引用根网页目录并键入地址的其余部分，而不是使用..来转换目录。使用根相对URL应该适用于您。

Answer 2

如果您可以在项目中使用reworkcss（在node.js / gulp上运行），那么有一个插件可以满足您的需求：rework-plugin-url

gulp文件片段：

.pipe(rework(
  reworkPluginUrl(function(url) {
    return '../' + url;
  })
))

作为构建的一部分，以下CSS：

body {
  background: url(../images/bg.png);
}

将转变为：

body {
  background: url(../../images/bg.png);
}