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

Question

我最近在一个网站上遇到一个问题，页面上的样式真的很乱，但只在 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里只能有同目录下的文件，所以我把它们分开如下：

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 中中断？为什么必须只捆绑同一目录中的文件？
如果他不正确，那可能是什么问题？为什么拆分捆绑包会修复它？

Answer 1

对于旧版本的 IE，至少 < 10 有一些已知的限制

IE 可以加载的 CSS 和脚本文件的数量 - 如果您运行网站处于 Debug 模式且无法获取捆绑包，则这可能是个问题捆绑。

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

Internet Explorer CSS limits

Answer 2

当您的 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。使用如下 bundel 使浏览器查找不存在的文件 ~/path/subpath/all/image.jpg。也许这就是分开捆绑的原因。

Answer 3

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

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

不幸的是，浏览器中有一些需要注意的怪癖，例如这个 CSS 或 Apple 设备上的图像大小（运行之前使用 sprite 表）。你的老板听起来像是那种充满活力的人，会知道这一点。

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

Bundling files in different directories?

css

c#

asp.net-mvc

bundle

bundling-and-minification