내 CSS 번들링이 bin 배포 된 MVC4 앱에서 작동하지 않는 이유는 무엇입니까?
여기에 제공된 조언과 하나 또는 두 개의 즉석 수정 사항을 기반으로 MVC4 응용 프로그램을 호스팅 공급자에 배포했지만 가장 즉각적인 문제는 CSS 번들링이 작동하지 않는다는 것입니다. 번들 참조를 명시 적 파일 참조로 바꾸면 내 CSS가 다시 작동합니다.
VS2012의 표준 MVC4 RTM 프로젝트 템플릿을 사용하고 있습니다. 공급자는 IIS 7.5 및 ASP.NET 4를 실행 중이며 동일한 앱의 이전 MVC3 버전이 제대로 작동했습니다. 나는 너무 낮은 버전의 어딘가에 의존성을 가지고 있다고 생각하고 이것은 또한 내 영역 기반 액션 링크 문제에 기여할 수 있습니다 .
기술적 증상은 다음과 같습니다.
선 @Styles.Render("~/Content/css")은 다음과 같이 렌더링됩니다.<link href="/Content/css?v=" rel="stylesheet"/>
CSS 및 스크립트 번들링은 .NET이 4.0 또는 4.5를 실행하는지에 관계없이 작동합니다. .NET 4.0을 실행 중이며 잘 작동합니다. 그러나 최소화 및 번들링 동작이 작동하려면 web.config가 디버그 모드에서 실행되지 않도록 설정되어야합니다.
<compilation debug="false" targetFramework="4.0">
_Layout.cshtml 파일에서 jQuery UI 예제 용이 번들을 가져옵니다.
@Styles.Render("~/Content/themes/base/css")
함께 실행 debug="true"하면 다음 HTML이 표시됩니다.
<link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/>
하지만 debug="false". 대신 이걸 가져 오겠습니다.
<link href="/Content/themes/base/css?v=myqT7npwmF2ABsuSaHqt8SCvK8UFWpRv7T4M8r3kiK01" rel="stylesheet"/>
이것은 스크립트 및 CSS 파일의 문제를 쉽게 디버깅 할 수있는 기능입니다. MVC4 RTM을 사용하고 있습니다.
MVC 종속성 문제라고 생각되면 Nuget으로 이동하여 MVC 관련 패키지를 모두 제거한 다음 패키지를 검색하여 Microsoft.AspNet.Mvc설치하는 것이 좋습니다. 나는 최신 버전을 사용하고 있으며 v.4.0.20710.0으로 올 것입니다. 필요한 모든 종속성을 확보해야합니다.
또한 이전에 MVC3를 사용하고 지금 MVC4를 사용하려는 경우 web.config (s)로 이동하여 MVC 4.0 버전을 가리 키도록 해당 참조를 업데이트해야합니다. 확실하지 않은 경우 언제든지 새로운 MVC4 앱을 만들고 거기에서 web.config를 복사 할 수 있습니다. 그렇다면 Views / Areas 폴더에서 web.config를 잊지 마세요.
업데이트 : 필요한 Microsoft.AspNet.Web.Optimization것은 프로젝트에 설치된 Nuget 패키지라는 것을 발견했습니다 . 대상 프레임 워크를 4.5 또는 4.0으로 지정하는지 여부에 관계없이 MVC4 RTM 앱에 기본적으로 포함됩니다. 번들링 클래스가 포함 된 네임 스페이스이며 프레임 워크에 종속되지 않는 것으로 보입니다. 4.5가 설치되지 않은 서버에 배포했는데 여전히 예상대로 작동합니다. DLL이 나머지 앱과 함께 배포되는지 확인하십시오.
2013 년 11 월 4 일 업데이트 :
이 문제가 발생하는 이유는 번들 이름 끝에 .js 또는 .css 가있어서 ASP.NET이 MVC 및 BundleModule을 통해 요청을 실행하지 못하기 때문입니다.
더 나은 성능을 위해이 문제를 해결하는 권장 방법은 번들 이름에서 .js 또는 .css 를 제거하는 것 입니다.
따라서 /bundle/myscripts.js 는 / bundle / myscripts가됩니다.
또는 system.webServer 섹션 에서 web.config를 수정하여 BundleModule을 통해 이러한 요청을 실행할 수 있습니다 (원래 답변이었습니다)
<modules runAllManagedModulesForAllRequests="true">
<remove name="BundleModule" />
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>
편집 : 또한 이름이 'css'(점없이)로 끝나는 경우에도 문제가되는 것으로 나타났습니다. 문제를 해결하기 위해 번들 이름을 'DataTablesCSS'에서 'DataTablesStyles'로 변경해야했습니다.
몇 가지를 명확히하기 위해 System.Web.Optimization(일명 번들링 / 최소화) 4.0에서 작동합니다. 4.5의 어떤 것에 의존하지 않기 때문에 문제가 없을 것입니다.
스크립트 번들링이 작동하고 CSS와 관련된 유일한 문제라면 상대 URL에 문제가있을 수 있습니까?
먼저 렌더링 된 페이지를보고 CSS 번들에 대한 참조가 있는지 확인합니다. 예를 들면 다음과 같습니다.
<link href="/app/Content/css?v=oI5uNwN5NWmYrn8EXEybCI" rel="stylesheet"/>
그렇다면 번들링은 작동하지만 CSS 번들 내부의 내용이 엉망입니다. 일반적으로 이는 CSS 번들 내의 상대 URL이 잘못 되었기 때문입니다. 즉 이미지가 ~ / Content 아래에 있지만 번들 이름을 지정 ~/bundles/css하면 브라우저가에서 이미지를 잘못 검색합니다 ~/bundles.
또한 기본 동작은 debug=true. 따라서에서도 최적화를 활성화하려면 다음을 수행 debug=true해야합니다.
BundleTable.EnableOptimizations = true
업데이트 됨 :v="" 번들이 비어 있음을 의미 하는 새 정보를 사용하여 번들에 파일을 올바르게 추가하고 있으며 파일을 찾았는지 확인해야합니다. 번들에 파일을 어떻게 포함하고 있습니까?
생략하는 runAllManagedModulesForAllRequests="true"것도 나를 위해 일했습니다. 에 다음 구성을 추가하십시오 web.config.
<modules>
<remove name="BundleModule" />
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>
runAllManagedModulesForAllRequests적절하게 사용되지 않으면 귀하의 웹 사이트에 성능 저하를 초래합니다. 이 기사를 확인 하십시오 .
고려해야 할 또 다른 사항은 참조가 같은 이름을 가질 수 없다는 것입니다. 예를 들어 libraries디렉토리에 jQuery UI가 있고 다음과 같이 JavaScript 파일을 번들로 묶는 경우 :
bundles.Add(new ScriptBundle("~/libraries").Include("~/libraries/jquery-ui/jqyery-ui.js"));
그런 다음 CSS 파일을 다음과 같이 묶으십시오.
bundles.Add(new StyleBundle("~/libraries").Include("~/libraries/jquery-ui/jqyery-ui.css"));
...
실패합니다. 고유 한 이름을 가져야합니다. 그래서 같은 것을 할 ScriptBundle("~/libraries/js")...과 ScriptBundle("~/libraries/css")...또는 무엇이든을.
기존 답변에 대한 부록으로 어느 것도 나를 위해 일하지 않았으며 여기에서 해결책을 찾았습니다.
https://bundletransformer.codeplex.com/discussions/429707
해결책은
- Visual Studio에서 .less 파일을 마우스 오른쪽 단추로 클릭하십시오.
- 속성 선택
- 표시
Build Action로Content - 재배포
확장이없는 핸들러를 제거 할 필요가 없습니다 (인터넷의 다른 솔루션에서 찾을 수 있음).
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />web.config 설정 을 추가 할 필요가 없습니다 .
도움이 되었기를 바랍니다!
라이브 환경에서 CSS와 동일한 문제가 발생했습니다. 나는 여기의 모든 조언을 따랐고 번들링이 장면 뒤에서 어떻게 작동하는지 조사했습니다. 이로 인해 .Net 캐시를 지우도록 요청 (앱 서버에 대한 액세스 권한이 없음)하여 번들링이 앱 서버에서 작동하기 시작했습니다. 그러나 CDN이 구성된로드 밸런서를 통해 사이트에 액세스 할 때 번들 식별자가 URL에서 업데이트되었지만 번들에 이전 CSS가 포함되었습니다. 단순히 CDN을 플러시하여 문제가 해결되었습니다.
이 문제가 발생할 수있는 다른 사람을 돕는 데 도움이되기를 바랍니다.
내 CSS 파일 중 하나에 문제를 일으킨 파일 이름에 '_'문자가 있습니다.
your_style.css의 이름을 yourstyle.css로 변경했습니다.
나는 이것이 오래된 문제라는 것을 알고 있지만 사람들은 여전히 이것을 직면 할 수 있습니다.
다음은 BundleModule이 web.config에 존재하고로드되었는지 확인하고 존재 여부에 따라 EnableOptimizations를 설정합니다.
이런 식으로 사용 가능 여부에 관계없이 css / js 참조가 제대로 작동합니다. 다시 말해:
BundleModule을 사용할 수있는 경우 번들링 / 최적화가 활성화됩니다.
BundleModule을 사용할 수없는 경우 번들링 / 최적화가 비활성화되고 자동으로 전체 참조가 대신 사용됩니다.
암호:
public static void RegisterBundles(BundleCollection bundles)
{
// bundeling code here
// ...
// bundeling code here
bool bundelingModuleIsAvailable = false;
try {
bundelingModuleIsAvailable = HttpContext.Current.ApplicationInstance.Modules.AllKeys.Contains("BundleModule");
}
catch { }
if (!bundelingModuleIsAvailable)
System.Diagnostics.Debug.WriteLine("WARNING : optimization bundle is not added to Web.config!");
BundleTable.EnableOptimizations = bundelingModuleIsAvailable && !Debug_CheckIsRunning();
//Debug_CheckIsRunning is optional, incase you want to disable optimization when debugging yourself
BundleTable.EnableOptimizations = true;
}
private bool Debug_CheckIsRunning()
{//Check if debug is running
string moduleName = System.Diagnostics.Process.GetCurrentProcess().MainModule.ModuleName;
return (moduleName.Contains("iisexpress.exe") || moduleName.Contains(".vshost") || moduleName.Contains("vstest.executionengine") || moduleName.Contains("WebDev.WebServer"));
}
역사를 위해 :
번들에서 언급 된 모든 less / css 파일에 Build Action = "Content"가 있는지 확인하십시오.
번들의 일부 파일이 대상 서버에 누락 되어도 오류가 없습니다.
나는 같은 문제가 있었고 그것은 어리석은 실수로 판명되었습니다 .css 파일이 프로젝트에 포함되지 않았으므로 게시되지 않았으므로 솔루션의 모든 파일을보고 프로젝트에 추가하십시오.
Azure 웹 사이트에 코드를 배포하는 동안이 문제에 직면했습니다. 내가 visualstudio.com에서 빌드를 배포 할 때 작동했고 Visual Studio 2013에서 빌드를 게시하려고 할 때는 그렇지 않았습니다. 주요 문제는 CSS 축소였습니다. 이 질문에 대한 첫 번째 답변에 전적으로 동의합니다. 그러나 나를 위해 일한 공유 솔루션을 생각하면 문제를 해결하는 데 도움이 될 수 있습니다.
기본적으로 VSO를 통해 배포 할 때 system.web.Optimization을 시작하여 css, js에 대한 축소 파일을 생성하지만 VS 2013에서 빌드를 게시 할 때는 아래 사항을 처리해야합니다. 번들링 및 축소 1. 폴더 구조와 번 들러 명명 규칙이 달라야합니다. 이 같은.
bundles.Add(new StyleBundle("~/Content/materialize/mcss").Include(
"~/Content//materialize/css/materialize.css"));
2. bundleconfig 정의 하단에 추가
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
// Code removed for clarity.
BundleTable.EnableOptimizations = true;
}
3. web.config에 debug false를 추가해야합니다 (로컬 디버깅을 시작할 때 VS2013은 prod에 배포하기 전에 다시 넣어야한다는 팝업을 표시합니다. 그 자체로 많은 설명이 있습니다.
<system.web>
<compilation debug="true" />
<!-- Lines removed for clarity. -->
</system.web>
Visual Studio 2015에서는 web.config에 debug = true가 설정되어있을 때 BundleConfig에서 javascript 파일의 .min 버전을 참조하여 문제가 발생했음을 발견했습니다.
예를 들어, jquery는 BundleConfig에서 다음을 지정합니다.
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.min.js"));
web.config에서 debug = true가 설정된 경우 jquery가 제대로로드되지 않았습니다.
축소되지 않은 버전 참조 :
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
문제를 해결합니다.
debug = false를 설정하면 문제도 해결되지만 물론 그다지 도움이되지는 않습니다.
일부 축소 된 자바 스크립트 파일은 올바르게로드되고 다른 파일은로드되지 않았다는 점도 주목할 가치가 있습니다. 나는 나를 위해 최소화 처리하는 VS에 찬성하여 모든 축소 된 자바 스크립트 파일을 제거했습니다.
이 시도:
@System.Web.Optimization.Styles.Render("~/Content/css")
@System.Web.Optimization.Scripts.Render("~/bundles/modernizr")
그것은 나에게 효과적이었습니다. 나는 아직 배우고 있는데 왜 그런 일이 일어나는지 아직 이해하지 못했습니다.
대화에 유용한 정보를 추가하기 위해 배포시 번들에 대해 404 오류가 발생했습니다 (로컬 개발 환경에서는 문제 없음).
번들 이름의 경우 다음과 같은 버전 번호를 포함합니다.
bundles.Add(new ScriptBundle("~/bundles/jquerymobile.1.4.3").Include(
...
);
변덕스럽게 모든 점을 제거하고 모든 점이 다시 마술처럼 작동했습니다.
bundles.Add(new ScriptBundle("~/bundles/jquerymobile143").Include(
...
);
누군가가 시간과 좌절감을 절약하는 데 도움이되기를 바랍니다.
Nuget에서 일부 패키지를 추가하는 동안이 문제가 발생하여 업데이트하는 것을 잊었습니다.
따라서 먼저 프로젝트에 설치된 모든 패키지를 업데이트하십시오.
Update-Package
Global.asax.cs에서 다음을 추가하십시오.
BundleTable.EnableOptimizations = true;
css 이름은 일관성이 있어야합니다.
jqueryUI css의 이름은 Contents / themes / base 폴더의 "jquery.ui.XXX"가 아닙니다.
따라서 다음과 같아야합니다.
잘못된:
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
맞다 :
bundles.Add(new StyleBundle("~/Bundles/themes/base/css").Include(
"~/Content/themes/base/core.css",
"~/Content/themes/base/resizable.css",
"~/Content/themes/base/selectable.css",
"~/Content/themes/base/accordion.css",
"~/Content/themes/base/autocomplete.css",
"~/Content/themes/base/button.css",
"~/Content/themes/base/dialog.css",
"~/Content/themes/base/slider.css",
"~/Content/themes/base/tabs.css",
"~/Content/themes/base/datepicker.css",
"~/Content/themes/base/progressbar.css",
"~/Content/themes/base/theme.css"));
MVC5에서 시도하고 성공적으로 작동했습니다.
이 코드를 공유보기에 추가해야합니다.
@*@Scripts.Render("~/bundles/plugins")*@
<script src="/Content/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Kendo JS -->
<script src="/Content/kendo/js/kendo.all.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.web.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.aspnetmvc.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="/Content/plugins/morris/morris.min.js"></script>
<!-- Sparkline -->
<script src="/Content/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="/Content/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/Content/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="/Content/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/Content/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="/Content/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/Content/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="/Content/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/Content/plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="/Content/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/Content/dist/js/demo.js"></script>
<!-- Common -->
<script src="/Scripts/common/common.js"></script>
<!-- Render Sections -->
@RenderSection("scripts", required: false)
@RenderSection("HeaderSection", required: false)
이것은 내 문제를 해결했습니다. _layout.cshtml에이 줄을 추가했습니다.
@*@Scripts.Render("~/bundles/plugins")*@
<script src="/Content/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Kendo JS -->
<script src="/Content/kendo/js/kendo.all.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.web.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.aspnetmvc.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="/Content/plugins/morris/morris.min.js"></script>
<!-- Sparkline -->
<script src="/Content/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="/Content/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/Content/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="/Content/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/Content/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="/Content/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/Content/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="/Content/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/Content/plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="/Content/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/Content/dist/js/demo.js"></script>
<!-- Common -->
<script src="/Scripts/common/common.js"></script>
<!-- Render Sections -->
나는 같은 문제가 있었다. 난 그냥 변환 해
@Styles.Render("~/Content/css")
and @Scripts.Render("~/bundles/modernizr") to
@Styles.Render("/Content/css")
@Scripts.Render("/bundles/modernizr")
그리고 그 일. 변환하는 것을 잊지 마세요
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
to
@Scripts.Render("/bundles/jquery")
@Scripts.Render("/bundles/bootstrap")
좋은 시간 보내세요
'program tip' 카테고리의 다른 글
| 힘내가 잘못된 분기로 당겨 (0) | 2020.11.13 |
|---|---|
| 빈 iframe src가 유효합니까? (0) | 2020.11.13 |
| Sublime Text 2 : scss 및 Less 파일에 색상을 지정하는 방법은 무엇입니까? (0) | 2020.11.13 |
| Android에서 전체 애플리케이션에 대한 사용자 지정 글꼴을 설정하는 방법은 무엇입니까? (0) | 2020.11.13 |
| C #에서 파일을 읽고 쓰는 방법 (0) | 2020.11.13 |