MVC пакетирования и CSS относительные URL-адреса

Question

комплектации MVC является возвращающиеся неправильный URL в CSS изображений при использовании CssRewriteUrlTransform:

У меня есть приложение интранета, чей URL представляет собой, например: http://usid01-srv002/MyApplication. Он находится в «Веб-сайте по умолчанию» IIS.

Который имеет следующее BundleConfig.cs:

bundles.Add(new StyleBundle("~/bundles/jcss") 
    .Include("~/Scripts/JQueryUI/css/*.css", new CssRewriteUrlTransform()) 
); 

системы обвязки генерирует неправильный URL для любых изображений, упоминаемых в этих CSS файлов, что дает очень хорошо протестированы файлы CSS 404 даже JQueryUI (от FireBug):

например, это генерируя

http://usid01/path/foo.png 

Когда следует генерируя:

http://usid01/MyApplication/path/foo.png 

Как получить системы обвязки для генерации URL, который указывает на нужное место?

Answer 1

CssRewriteUrlTransform обновляет CSS Url с абсолютным путем, говоря так, если мы используем -

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

, и мы имеем следующий класс CSS в "site.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; 
} 

и после папки -

-Web site Root 
    -Content 
    --site.css 
    --Images 
    ---Sandy.jpg 

Объединение сгенерирует следующий CSS-путь для «фонового изображения», -

background-image: url("/Content/Images/Sandy.jpg"); 

И теперь, если вы хостинг веб-сайта/веб-приложения в качестве веб-сайта на веб-сервере выше путь будет работать, , потому что браузер будет отправлять запрос на этот ресурс, используя следующий адрес из ведущих «/»

http://<server>/content/images/sandy.jpg 

но если вы размещаете сайт как веб-приложение, это создаст проблему. Поскольку браузер будет по-прежнему интерпретировать это как абсолютный Url вместо относительной и по-прежнему отправить следующий запрос для извлечения этого ресурса -

http://<server>/content/images/sandy.jpg 

Итак, решение этой проблемы является использование относительного Url даже в файле CSS, а затем удалить CssRewriteUrlTransform от конфигурации Bundle, как показано ниже -

background-image: url("Images/Sandy.jpg"); 

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

Answer 2

Это работает для меня,

<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/content/styles/css")" rel="stylesheet" type="text/css" /> 

Answer 3

причина Брок en images заключается в том, что он пытается найти изображения относительно нового пути, определенного во время комплектации i.e.

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

Итак, если есть образ пути (то есть фоновое изображение), определенное в style.css, он будет пытаться получить свой путь относительно Материалов/WooThemes вместо Content/WooThemes/CSS/, поэтому изображения не будут найдены

Один из способов преодолеть проблему для файлов одной папки будет определять новый путь таких же, как и папок (чьи файлы уменьшенные), т.е.

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

Таким образом, в комплекте файлов и сами файлы путь будут соответствовать и изображения, определенные в CSS будут найдены, следовательно, этот вопрос будет решен

вопрос не только решить, если смешать файлы из разных папок по той же причине, описанной выше