Question

我的BundleConfig.cs文件中有以下内容：

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/mainstyle.css",
            "~/Content/layout/style.css", /* <<< HERE, the folder is different */
            "~/Content/bootstrap.css",
            "~/Content/site.css"));

并在~/Content/layout/style.css文件中：

#page {
    width: 1000px;
    margin: 0 auto;
    background: url(images/img04.jpg) repeat-y left top;
}

如果我们知道捆绑包将所有css组合在一起（？！），服务器将如何看到 img04.img （url(images/img04.jpg)）的链接，如{ {1}}，Content/images/或Content/css/images/？

Answer 1

在对主题进行一些Google搜索后，似乎CssRewriteUrlTransform类确保图片网址来自动态包css文件，如下所示：

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/mainstyle.css",
            "~/Content/bootstrap.css",
            "~/Content/site.css")
           .Include("~/Content/layout/style.css", new CssRewriteUrlTransform()));

如果这没有帮助，但您想要使用捆绑，请将每个文件夹中的捆绑分开。将文件夹路径放在包＆＃34; name＆＃34;中，如此new StyleBundle("~[folder_path]/[any word, like 'css' ot whatever you like]")：

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/mainstyle.css",
            "~/Content/bootstrap.css",
            "~/Content/site.css"));

bundles.Add(new StyleBundle("~/Content/layout/css").Include(
            "~/Content/layout/style.css"));

Answer 2

这是组合文件时的常见问题，您需要：

为这些网址设置服务器端重写规则。
将CSS图像转换为base64并使CSS文件独立任何外部图像。
从Content目录加载CSS，因此images/将是。.net 相对于该目录。
更新CSS文件中的路径。
在“预期”目录中拥有图像的副本。（减维护）

对于CssRewriteUrlTransform应用程序，如serhio所述，bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/mainstyle.css", "~/Content/bootstrap.css", "~/Content/site.css") .Include("~/Content/layout/style.css", new CssRewriteUrlTransform()));类将动态更新指定包含的捆绑文件中的url引用。例子由serhio提供：

{{1}}

相对路径和Bundle配置

2 个答案: