ASP.NET MVC4 번들 트위터 부트 스트랩과 함께

Question

MVC 4의 새로운 번들 기능을 트위터 부트 스트랩과 함께 사용하려고합니다. 그리고 그것은 저에게 glyphicons png-files int에 대한 경로가 어떤 식 으로든 엉망이되는 것처럼 보입니다. . Heres 내 코드 :

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
      "~/Static/Css/bootstrap/bootstrap.css", 
      "~/Static/Css/bootstrap/bootstrap-padding-top.css", 
      "~/Static/Css/bootstrap/bootstrap-responsive.css", 
      "~/Static/Css/bootstrap/docs.css")); 


     bundles.Add(new ScriptBundle("~/bundles/publicjs").Include(
      "~/Static/Js/jquery-1.7.2.js", 
      "~/Static/Js/bootstrap/bootstrap.js", 
      "~/Static/Js/cookie/jquery.cookie.js")); 

버튼과 마찬가지로 아이콘이 표시되지 않습니다. 내가 여기서 뭔가 잘못하고있는거야? 어떤 제안? 당신이 할 수있는 일

Answer 1

CSS 파일의 아이콘/이미지가 상대 경로를 사용하는 경우가 많으므로 번들이 번들로 제공되지 않는 CSS 파일과 동일한 앱 상대 경로에 있지 않으면 깨진 링크가됩니다.

우리는 우리의 할 일 목록에 CSS에서 리베이스 URL이 있지만, 상대 URL 그냥 작동 그래서 지금은 할 수있는 easist 것은 즉, CSS 디렉토리 모습을 번들 경로를 가지고있다 :

new StyleBundle("~/Static/Css/bootstrap/bundle") 

업데이트 : 1.1beta1 릴리스에서이 기능이 추가되었으므로 이미지 URL을 자동으로 다시 쓰려면이 리베이스를 자동으로 수행하는 새 ItemTransform을 추가 할 수 있습니다.

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
      "~/Static/Css/bootstrap/bootstrap.css", 
      "~/Static/Css/bootstrap/bootstrap-padding-top.css", 
      "~/Static/Css/bootstrap/bootstrap-responsive.css", 
      "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform())); 

Answer 2

당신이 사용자 정의 page로 이동 물론, 스프라이트에 섹션을 @iconSpritePath 및 @iconWhiteSpritePath을 변경하고, 새로운 스타일을 다운로드 할 수 있습니다.

나는 폴더 Content/Images 폴더 내 이미지를 넣었습니다 난에 경로를 변경했습니다 :

• /Content/Images/glyphicons-halflings.png
• /Content/Images/glyphicons-halflings-white.png

또 다른 대안은 모든 LESS 파일을 다운로드하는 것입니다 github에서 variables.less 파일의 동일한 변수를 변경하고 bootrap.less을 다시 컴파일하십시오. SimpLESS과 같은 도구가 포함 된 파일 ()

Answer 3

'CssRewriteUrlTransform'은 가상 디렉터리에서 실행되지 않는 응용 프로그램에 적합합니다.

앱이 http://your-site.com/에서 실행되는 경우 정상적으로 실행되지만 http://your-site.com/your-app/에서 실행되면 기본 'CssFixRewriteUrlTransform'이 (가) 이미지를 '/'로 참조하기 때문에 모든 이미지에 404가 표시됩니다.

이 문제를 해결하려면, 나는이 같은 'CssRewriteUrlTransform'내 자신의 버전을 구현 한 :

public class CssFixRewriteUrlTransform : IItemTransform { 
    private static string ConvertUrlsToAbsolute(string baseUrl, string content) { 
     if (string.IsNullOrWhiteSpace(content)) { 
      return content; 
     } 
     var regex = new Regex("url\\(['\"]?(?<url>[^)]+?)['\"]?\\)"); 
     return regex.Replace(content, match => string.Concat("url(", RebaseUrlToAbsolute(baseUrl, match.Groups["url"].Value), ")")); 
    } 

    public string Process(string includedVirtualPath, string input) { 
     if (includedVirtualPath == null) { 
      throw new ArgumentNullException("includedVirtualPath"); 
     } 
     var directory = VirtualPathUtility.GetDirectory(includedVirtualPath); 
     return ConvertUrlsToAbsolute(directory, input); 
    } 

    private static string RebaseUrlToAbsolute(string baseUrl, string url) { 
     if (string.IsNullOrWhiteSpace(url) || string.IsNullOrWhiteSpace(baseUrl) || url.StartsWith("/", StringComparison.OrdinalIgnoreCase)) { 
      return url; 
     } 
     if (!baseUrl.EndsWith("/", StringComparison.OrdinalIgnoreCase)) { 
      baseUrl = string.Concat(baseUrl, "/"); 
     } 
     return VirtualPathUtility.ToAbsolute(string.Concat(baseUrl, url)); 
    } 
} 

UPDATE :

public class CssRewriteUrlTransformWrapper : IItemTransform 
{ 
    public string Process(string includedVirtualPath, string input) 
    {   
     return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);   
    } 
} 

: 그 밖에 다른 해결책이었다 지적 superjos 덕분에

Answer 4

수정 이제 내 AspNetBundling 표준 변압기의 다른 문제를 해결하는 NuGet 패키지, 특히 data-uris 사용에 대한 수정. 오픈 소스도 GitHub에 있습니다.

그냥 수행

1. Install-Package AspNetBundling
2. 이 CssRewriteUrlTransformFixed