将文件捆绑在不同目录中？答案

【问题标题】：Bundling files in different directories?将文件捆绑在不同目录中？
【发布时间】：2015-07-19 03:57:09
【问题描述】：

我最近在一个网站上遇到了一个问题，其中页面上的样式确实混乱但仅在 IE 中。我的老板告诉我这很可能是因为正在渲染的 CSS Bundle 包含来自不同目录的 CSS 文件，所以我检查了一下，它确实做到了。它类似于以下内容：

    bundles.Add(new StyleBundle("~/path/subpath/all").Include(
                 "~/path/subpath/filename.css",
                 "~/path/subpath/filename1.css",
                 "~/path/subpath/filename2.css",
                 "~/path/subpath/filename3.css",
                 "~/path/subpath/anotherSubPath/filename.css",
                 "~/path/subpath/anotherSubPath/filename1.css",
                 "~/path/aDifferentSubPath/filename.css"));

他说Bundling不能这样工作，你必须在一个Bundle中只有同一目录的Files，所以我将它们分开如下：

bundles.Add(new StyleBundle("~/path/subpath/all").Include(
             "~/path/subpath/filename.css",
             "~/path/subpath/filename1.css",
             "~/path/subpath/filename2.css",
             "~/path/subpath/filename3.css"));

bundles.Add(new StyleBundle("~/path/subpath/anotherSubPath/all").Include(
             "~/path/subpath/anotherSubPath/filename.css",
             "~/path/subpath/anotherSubPath/filename1.css"));

bundles.Add(new StyleBundle("~/path/aDifferentSubPath/all").Include(
             "~/path/aDifferentSubPath/filename.css"));

这有效并解决了我们在 IE 中的问题。好的，现在回答我的问题：

我的老板是对的吗？不能捆绑来自不同文件夹的文件吗？
如果他是正确的，为什么这只会在 IE 中中断？为什么只能捆绑同一目录中的文件？
如果他不正确，可能是什么问题？为什么拆分捆绑包会修复它？

【问题讨论】：

我是你的老板，你因为怀疑我被解雇了，哈哈。

标签： c# css asp.net-mvc bundle bundling-and-minification

【解决方案1】：

当您的 css 文件使用图像、字体等静态文件的相对路径时，捆绑名称和文件夹存在常见问题。

例如你有：

 bundles.Add(new StyleBundle("~/path/subpath/all").Include(
             ...
             "~/path/subpath/anotherSubPath/filename1.css"));

在您的filename1.css 中，您使用background: url(image.jpg)，通常此图像与filename1.css 位于同一文件夹中，即~/path/subpath/anotherSubPath/image.jpg。使用像下面这样的捆绑包使浏览器查找不存在的文件~/path/subpath/all/image.jpg。也许这就是拆分捆绑包的原因。

【讨论】：

因此，如果您的 CSS 有（使用您的示例）引用的图像，最好不要捆绑该文件？还是只是为了改变图片的路径？
很难说什么是最佳实践。我认为拆分捆绑包更好，因为这样它也可以在不捆绑的情况下使用。

【解决方案2】：

对于老版本的IE，至少

IE 可以加载的 CSS 和 Script 文件的数量 - 如果您在 Debug 模式下运行该站点，并且捆绑包没有被捆绑，这可能是个问题。

如果不是这样，那么您的文件中是否有超过 4,096 个选择器？？？

Internet Explorer CSS limits

【讨论】：

感谢您的回复，链接非常有帮助！

【解决方案3】：

你的老板听起来很棒！首先，因为 CSS 路径是相对于 CSS 文件的，所以我怀疑这就是他建议你无论如何都要改变它的原因。

但 CSS 长度也可能是一个问题，因此可能是这种情况的根本原因。

不幸的是，浏览器中存在一些需要注意的怪癖，例如这个 CSS 问题，或者 Apple 设备上的图像大小（之前在精灵表中遇到过这种情况）。你老板听起来像是那种会知道这一点的充满活力、精力充沛的人。

【讨论】：