2012-09-30 2 views
5

번들링을 사용하면 함께 사용하는 파일 묶음을 브라우저에 한 번 전달할 수 있습니다. 이것은 내가 다음과 같은 것을 할 싶습니다 내 루트 스타일 예를 들어 의미 :less와 css 파일을 번들로 묶기

var bundle = new StyleBundle("~/Content/style").Include(
    "~/Content/mystyle.less", 
    "~/Content/bootstrap.css", 
    "~/Content/bootstrap-responsive.css"); 
bundle.Transforms.Add(new LessTransform()); 
bundle.Transforms.Add(new CssMinify()); 
bundles.Add(bundle);  

을하지만 그것은 모든-번들을 사전처럼 보이는이는 custom transform technique for bundling less files 아주 잘 작동하지 않는 것 파일을 하나의 CSS 파일로 변환 한 다음 LessTransform에 전달합니다. 내가이 방법을 말할 수있는 것에서는 적은 파일을 모두 함께 묶는 경우에만 작동합니다.

동일한 번들에 less와 css 파일을 모두 허용하는 번들을 구할 수있는 방법이 있습니까?

+2

'StyleBundle'에는 인스턴스화 할 때 이미 CssMinify 변환기가 등록되어 있다고 생각합니다. 게시 한 코드에서 변환기가 적어지기 전에 Less 파일을 축소하려고 시도한다는 의미입니다. 트랜스포머를 추가하기 전에 일반 '번들'유형을 사용하거나 변형 목록을 지우십시오. – rmac

+0

@rmac 이것은 정확히 무슨 일이 일어나는지 들리는 것처럼 들립니다. 아프다. –

+0

사과, 나는 이것을 처음에 고려했다. 그러나 나는 * StyleBundle'' /'Bundle'을 당신이 준 링크 안에서 체크하고 그것을 배제했다고 생각했다. 그러나 블로그를 검토 할 때, 나는 실수했다고 봅니다. 나는 이것이 사실일지도 모른다라고 생각한다. – Sethi

답변

0

나는 이것에 대해 좀 더 자세히 살펴본 후 StyleBundle 대신 Bundle을 사용해 보았지만 여전히 문제가있었습니다. 나는이 문제가 특히 bootstrap.css 파일이 덜 싫어하는 구문을 가지고 있다고 생각한다.

2

나는 모든 CSS 유효한 이하 (전부는 아니지만 작은 유효한 CSS)이라고 생각

그래서 LessTransform 어떤 차이가해서는 안 부트 스트랩 CSS 파일에 적용 필요.

모든 파일을 하나의 CSS 파일로 묶어서 브라우저에 전달합니다.

디자인 타임 동안 성능 문제가있을 수 있습니다.

올바른 출력이 여전히 생성되고 캐싱을 수행하면 런타임에 성능 문제가 발생하지 않습니다.

+0

이것은 처음 생각이기도합니다. (CSS의 수퍼 세트는 적습니다.) 그러나 CSS와 CSS 파일이 모두 포함되어있을 때 번들을 변환하기 전에 변환이 덜 일어나기 전에 먼저 어떤 일이 발생합니다 (하지만 흥미롭게는 아닙니다. 당신은 단지 적은 것을 가지고있을 때). –

4

네가 맞다. 변압기는 CSS/LESS의 모든 내용을 변환기로 전달하기 전에 연결한다. 즉, 덜 CSS 스타일 시트에 표준 CSS를 포함 할 수 있기 때문에 변환기는 덜 (less) CSS와 CSS의 존재를 질식시키지 않아야합니다.

이미 변압기가 연결된 StyleBundle 개체를 사용하고있는 것으로 보입니다.

아래에 자신의 답변으로
var customStyles = new Bundle("~/bundle/style/css") 
         .Include("~/Content/normalize.css","~/Content/*.less"); 
bootstrapStyles.Transforms.Add(new LessTransform()); 
bootstrapStyles.Transforms.Add(new CssMinify()); 
bundles.Add(customStyles); 

에서, bootstrap.css 파일에 문제가 덜 트랜스포머가 그것을 좋아하지 않는 것이 아니라 :이처럼 내 설정에서와 일반적인 Bundle를 사용해보십시오 아마도 @imports에 대한 경로 문제 일 수 있습니다. LESS 변환기가 어떤 의존성 스타일 시트에 대한 적절한 경로를 해결하는지 확인하기 위해 무언가를 사용하는지 확인하십시오.

2

나는 이것이 이전 게시물의 조금 알고,하지만 난 사람에게 유용 할 수 있습니다 뭔가 이상한 나타났습니다은 ...

나는 Bundle 객체가 하이픈을 좋아하지 않는 것으로 나타났습니다 파일이 적을 때 CSS 파일의 이름. 예 :

var frontendStyles = new Bundle("~/bundles/frontend.main.css") 
      .IncludeDirectory("~/Content/less", "*.less") 
      .Include(
       "~/Content/ladda.css", 
       "~/Content/jquery.mobile.custom.structure.min.css", 
       "~/Content/jquery-ui.1.9.2.custom.css" 
      ); 

나를 위해 작동하지 않습니다,하지만, 다음 (jqueryui 파일 이름 변경)을 수행합니다

var frontendStyles = new Bundle("~/bundles/frontend.main.css") 
      .IncludeDirectory("~/Content/less", "*.less") 
      .Include(
       "~/Content/ladda.css", 
       "~/Content/jquery.mobile.custom.structure.min.css", 
       "~/Content/jqueryui.1.9.2.custom.css" 
      ); 

그래서, "~/Content/bootstrapresponsive.css""~/Content/bootstrap-responsive.css"에서 파일 이름을 변경하면 아주 잘에 대한 문제를 정렬 할 수 있습니다 당신.