为什么当启用优化 = true 时不会显示 CSS 图像

Question

我使用了 MVC4 和当我改变

BundleTable.EnableOptimizations = true;

在 BundleConfig 中.cs文件我的映像无法加载并失败。

我的图像在我的解决方案上的位置：

 themes/default/Profile/images/abc.png

在我的捆绑包配置中：

  bundles.Add(new StyleBundle("~/Content/profile/PRA")
  .Include("~/Content/themes/default/profile/mycss.css"));

我的 CSS ：

.sampleback{
                background-image: url('images/abc.png');
            }

如果我想使用 BundleTable.EnableOptimizations = true;我必须我的 CSS 类，直到它工作：

.sampleback{
              background-image:url('../themes/default/Profile/images/abc.png');
         }

是错误吗？还是我走错了路？

Answer 1

外部 CSS 资源中的相对路径解析为 CSS 资源本身的相对路径。

因此，如果您的非捆绑 CSS 位于一条路径中，而捆绑的 CSS 是从另一条路径下载的，那么相对路径当然将不再正确。（除非捆绑机制会解决这个问题，并在写入捆绑的 CSS 之前自行更正这些相对路径。

最简单的解决方案是始终使用相对于域根目录的路径，因此从 / 开始。当然，这会降低您的项目灵活性，例如，如果您有一天将其移动到子文件夹。如果你也想避免这种情况，那么寻找一种预先解析你的CSS的解决方案，并允许你使用变量/常量在一个中心位置定义一个基本路径。