less와 CSS 파일을 함께 묶기

StackOverflow https://stackoverflow.com//questions/12660813

문제

나는 번들링을 사용하여 브라우저에 하나의 단일 전달로 함께 사용하는 여러 파일을 그룹화해야 한다고 생각합니다.이는 예를 들어 내 루트 스타일에 대해 다음과 같은 작업을 수행하고 싶다는 것을 의미합니다.

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);

하지만 이 방법은 별로 효과가 좋지 않은 것 같습니다. 더 적은 파일을 묶기 위한 사용자 정의 변환 기술 이는 모든 파일을 LessTransform에 전달하기 전에 단일 CSS 파일로 미리 묶는 것처럼 보입니다.내가 알 수 있듯이 이 방법은 적은 수의 파일을 모두 함께 묶는 경우에만 작동합니다.

동일한 번들에 less 파일과 CSS 파일을 모두 허용하는 번들을 얻을 수 있는 방법이 있습니까?

도움이 되었습니까?

해결책 4

나는 이것을 조금 더 많이 살펴보고 StyleBundle 대신 번들을 사용해 보았지만 여전히 문제가있었습니다.나는이 문제가 덜 사용되지 않는 일부 구문을 갖는 Bootstrap.css 파일과 관련이 있다고 생각합니다.

다른 팁

예, 맞습니다. 변환기는 모든 CSS/LESS 콘텐츠를 변환기에 전달하기 전에 연결합니다.즉, LESS 스타일시트 내에 표준 CSS를 항상 포함할 수 있으므로 변환기는 LESS와 CSS의 존재를 방해해서는 안 됩니다.

문제는 당신이 StyleBundle 이미 연결된 변환기가 있는 개체입니다.일반을 사용해보십시오 Bundle 내 구성에서와 마찬가지로 다음과 같습니다.

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 파일의 문제는 LESS 변환기가 마음에 들지 않는다는 것이 아니라 @imports의 경로 문제일 수 있습니다. LESS 변환기가 적절한 경로를 해결하기 위해 무언가를 사용하는지 확인하십시오. 모든 종속성 스타일시트에.

나는 모든 CSS가 LESS로 유효하다고 생각합니다(그러나 모든 LESS가 유효한 CSS는 아닙니다).

그래서 LessTransform 부트스트랩 CSS 파일에 적용해도 아무런 차이가 없어야 합니다.

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

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

올바른 출력은 계속 생성되며 캐싱은 이러한 출력을 방지합니다. 실행 시간 성능 문제.

나는 이것이 약간 오래된 게시물이라는 것을 알고 있지만 누군가에게 유용할 수 있는 이상한 것을 발견했습니다...

나는 그것을 발견했다 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/bootstrap-responsive.css" 에게 "~/Content/bootstrapresponsive.css" 당신을 위해 문제를 아주 잘 정리할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top