MVC 捆绑和 CSS 相对 URL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20484188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC Bundling and CSS relative URLs
提问by Charles Burns
MVC's bundling is returning the wrong URL in CSS images when using CssRewriteUrlTransform:
MVC 的捆绑在使用 CssRewriteUrlTransform 时在 CSS 图像中返回错误的 URL：
I have an intranet application whose URL is, for example: http://usid01-srv002/MyApplication. It's in IIS's "Default Web Site".
我有一个 Intranet 应用程序，其 URL 是，例如：http://usid01-srv002/MyApplication。它在 IIS 的“默认网站”中。
Which has the following in BundleConfig.cs:
其中有以下内容BundleConfig.cs：
bundles.Add(new StyleBundle("~/bundles/jcss")
.Include("~/Scripts/JQueryUI/css/*.css", new CssRewriteUrlTransform())
);
The bundling system is generating the wrong URL for any images referenced in those CSS files, yielding 404's even JQueryUI's very well tested CSS files (from FireBug):
捆绑系统正在为这些 CSS 文件中引用的任何图像生成错误的 URL，从而产生 404 甚至 JQueryUI 的经过良好测试的 CSS 文件（来自 FireBug）：
e.g. it's generating
例如它正在生成
http://usid01/path/foo.png
When it should be generating:
什么时候应该生成：
http://usid01/MyApplication/path/foo.png
How do I get the bundling system to generate a URL that points to the right location?
如何让捆绑系统生成指向正确位置的 URL？
回答by Bhalchandra K
CssRewriteUrlTransform updates the CSS Url with absolute path, saying so if we use -
CssRewriteUrlTransform 使用绝对路径更新 CSS Url，如果我们使用 -
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",new CssRewriteUrlTransform()));
and we have following CSS class in "site.css"
我们在“site.css”中有以下 CSS 类
.Sandy
{
background-image: url("Images/Sandy.jpg");
border: 1px solid #c8c8c8;
border-radius:4px 4px 4px 4px;
box-shadow: 1px 1px 8px gray;
background-position:left;
background-size:contain;
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-repeat:no-repeat;
min-height:100px;
min-width:100px;
display:block;
}
and following folder structure -
和以下文件夹结构 -
-Web site Root
-Content
--site.css
--Images
---Sandy.jpg
Bundling will generate following CSS Url Path for "background-image" -
捆绑将为“背景图像”生成以下 CSS Url 路径 -
background-image: url("/Content/Images/Sandy.jpg");
And now if you hosting the website / web application as a website on web server above path will work, because browser will send request for this resource using following Url because of leading '/'
现在，如果您将网站/Web 应用程序托管为 Web 服务器上的网站，则上述路径将起作用，因为浏览器将使用以下 URL 发送对该资源的请求，因为前导 '/'
http://<server>/content/images/sandy.jpg
but if you host the website as web application this will create problem. Because browser will still interpret this as absolute Url instead of relative and still send following request to fetch this resource -
但是，如果您将网站托管为 Web 应用程序，则会产生问题。因为浏览器仍会将其解释为绝对网址而不是相对网址，并且仍会发送以下请求以获取此资源 -
http://<server>/content/images/sandy.jpg
So, the solution for this problem is using the relative Url even in CSS file and then remove the CssRewriteUrlTransform from the Bundle config as below -
因此，此问题的解决方案是在 CSS 文件中使用相对 Url，然后从 Bundle 配置中删除 CssRewriteUrlTransform，如下所示 -
background-image: url("Images/Sandy.jpg");
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
回答by Muhammad Waqas Iqbal
The reason for the broken imagesis that it tries to find the images relative to the new path defined during bundlingi.e.
损坏图像的原因是它试图找到相对于捆绑期间定义的新路径的图像，即
bundles.Add(new StyleBundle("~/Content/woothemes").Include(
"~/Content/woothemes/css/style.css",
));
So if there is any image path (i.e. background image) defined in style.css, it will try to get its path relative to Content/woothemesinstead of Content/woothemes/css/, hence the images will not be found
因此，如果 style.css 中定义了任何图像路径（即背景图像），它将尝试获取其相对于Content/woothemes而不是Content/woothemes/css/ 的路径，因此将找不到图像
One workaround to overcome the issue for the files of same folderis to define the new path same as that of the folder (whose files are being minified) i.e.
解决同一文件夹中文件问题的一种解决方法是定义与文件夹（其文件正在缩小）相同的新路径，即
bundles.Add(new StyleBundle("~/Content/woothemes/css").Include(
"~/Content/woothemes/css/style.css",
));
This way the bundled files and the actual files path will match and the images defined in the css will be found, hence the issue will be resolved
这样捆绑文件和实际文件路径将匹配，并且将找到 css 中定义的图像，因此问题将得到解决
The issue will only not be resolved if you mix the files from different folders for the same reason described above
如果您出于上述相同的原因混合来自不同文件夹的文件，则该问题将无法解决
回答by Adrian Tarnowski
This works for me,
这对我有用，
<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/content/styles/css")" rel="stylesheet" type="text/css" />
