MVC4의 스타일

381

A의 .NET MVC4수행 방법 프로젝트 @Styles.Render작품을?

무슨 @Styles.Render("~/Content/css")파일로 부르고 있습니까?

내 Content폴더 안에 "css"라는 파일이나 폴더가 없습니다.

c# asp.net-mvc razor asp.net-mvc-4

— 리카르도 폴로 자라 미요
소스

11

내 asp.net/mvc/tutorials/mvc-4/ 번들링 및 축소 자습서 참조

— RickAndMSFT

453

폴더 내의 BundleConfig클래스 내에 선언 된 특정 번들에 포함 된 파일을 호출 App_Start합니다.

특정 경우에 대한 호출 @Styles.Render("~/Content/css")은 "~ / Content / site.css"를 호출합니다.

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

— 누노 카르 모
소스

22

알아야 할 한 가지는 번들에 이미 최소화 된 .css 파일을 추가하지 않는다는 것입니다. 예 : bootstrap.min.js에서는 작동하지 않으며 bootstrap.js에서만 작동합니다. 이것이 다른 사람들을 도울 수 있기를 바랍니다.

— codea

5

이것은 스크립트가 아니라 스타일에 관한 것입니다. bootstrap.min.js를 사용하려면 다음과 같이 번들을 만드십시오. bundles.Add (new ScriptBundle ( "~ / bundles / bootstrap"). Include ( "~ / Scripts / bootstrap.min.js");

— Xcalibur37

1

@codea 설정이 무엇인지 잘 모르겠지만 기본적으로 번 들러가 파일 을 *.min.*인수 *.*합니다.

— skmasq

@skmasq,이 줄을 쓸 때 VS2013을 사용하고있었습니다. 지금까지 상황이 바뀔 수 있습니다. 언급 해 주셔서 감사합니다 :)

— codea

나는 그것을 얻지 못한다 .... 왜 당신은 단순히 웹 페이지의 파일에 CSS <link>를 추가 할 수있을 때 번들을 만들고 MVC 에서이 미친 클래스에 그 경로를 추가하는 데 어려움을 겪습니까? 레이아웃 파일 또는 부분보기에서 모든 CSS 링크를 스타일 시트에 추가하면 한곳에서 관리 할 수 있습니다. 20 년 전 디자인 할 때 CSS 시스템의 전체 목적인 CSS 스킨을 더 이상 만들 수 없기 때문에 스타일 경로를 하드 코딩하기 어려운 디자인이기도합니다.

— Stokely 2016 년

34

대소 문자 구분에주의하십시오. 파일이 있다면

/Content/bootstrap.css

Bundle.config에서 리디렉션하여

.Include ( "~ / Content / Bootstrap.css")

CSS를로드하지 않습니다.

— 링크 토 에미
소스

또한 : 두 번째 포함의 철자가 다릅니다.

— Dan Esparza

1

sass / less-files도 지원합니까?

— Manticore

12

파티에 조금 늦었 어 그러나 아무도
번들링 및 축소 를 언급하지 않은 것 같습니다 StyleBundle.

@Styles.Render("~/Content/css")

전화 Application_Start():

BundleConfig.RegisterBundles(BundleTable.Bundles);

차례로 전화

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/Site.css"));
}

RegisterBundles()효과적으로 콤바인 및 축소하고 bootstrap.css & Site.css
하나의 파일로,

<link href="/Content/css?v=omEnf6XKhDfHpwdllcEwzSIFQajQQLOQweh_aX9VVWY1" rel="stylesheet">

그러나 ..

<system.web>
  <compilation debug="false" targetFramework="4.6.1" />
</system.web>

에서 debug로 설정된 경우에만 해당됩니다 . 그렇지 않으면 & 는 개별적으로 제공됩니다. 번들로 제공되거나 축소되지 않았습니다.falseWeb.config
bootstrap.cssSite.css

<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/Site.css" rel="stylesheet">

— 삼
소스

0

src="@url.content("~/Folderpath/*.css")" 스타일을 렌더링해야합니다

— 램
소스

0

App_start.BundleConfig에 정의 된대로

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

해당 섹션을 제거해도 아무 변화가 없습니다.

— 사티쉬 다디
소스

0

폴로 나는 여러 가지 이유로 MVC에서 번들을 사용하지 않을 것입니다. Apps_Start 폴더에서 사용자 정의 BundleConfig 클래스를 설정해야하기 때문에 귀하의 경우에는 작동하지 않습니다. 다음과 같이 HTML 헤드에 스타일을 간단하게 추가 할 수있는 경우에는 의미가 없습니다.

<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/bootstrap.theme.css" />

모든 뷰에서 호출되어 각 페이지에 놓인 Layout.cshtml 또는 부분 클래스에 추가 할 수도 있습니다. 스타일이 변경되면 다시 컴파일하지 않고도 이름과 경로를 쉽게 변경할 수 있습니다.

클래스에서 CSS에 하드 코딩 된 링크를 추가하면 UI와 디자인을 응용 프로그램 모델과 분리하려는 목적이 완전히 깨집니다. 더 이상 "스킨"을 만들거나 다른 장치, 테마 등을위한 별도의 스타일 모델을 만들 수 없으므로 C #에서 하드 코딩 된 스타일 시트 경로를 원하지 않습니다.

<link rel="stylesheet" href="~/UI/Skins/skin1/base.css" />
<link rel="stylesheet" href="~/UI/Skins/skin2/base.css" />

이 시스템과 Razor를 사용하면 데이터베이스 또는 사용자 설정에서 스킨 경로를 전환하고 경로를 동적으로 변경하여 웹 사이트의 전체 디자인을 변경할 수 있습니다.

15 년 전 CSS의 전체 목적은 사이트에 대한 사용자 제어 및 응용 프로그램 제어 스타일 시트 "스킨"을 개발하여 UI 모양과 느낌을 응용 프로그램과 별도로 전환하고 데이터 구조와 무관하게 내용을 재사용 할 수 있도록하는 것이 었습니다. ... 예 : 인쇄 가능한 버전, 모바일, 오디오 버전, 원시 XML 등

C # 클래스, Bootstrap과 같은 엄격한 스타일을 사용하고 응용 프로그램 코드와 함께 사이트 테마를 병합하는이 "구식의"하드 코딩 된 경로 시스템으로 다시 돌아가서 1998 년 웹 사이트 구축 방식으로 거슬러 올라갑니다.

— 스토 클리
소스

1

그럼 minification그때 까지 도대체 ? : s / :(

— Scott Fraley

예. 2019 년 개발자가 CSS와 자바 스크립트를 최소화 한 다음 Angular와 같은 API를 구축하고 클라이언트에게 메가 바이트의 불필요한 ECMAScript (Javascript)를 보내는 다른 이유는 무엇입니까? 우리는 대역폭이 제한된 고객에게 적은 코드 또는 압축 된 코드를 전송하여 대역폭에 의해 제한을받을 때 코드를 얻을 수있었습니다. 즉 14k 보드 모뎀입니다. 5G가 나오므로 gif 압축 또는 축소와 같은 코드 압축이 필요하지 않습니다. 그러나 결과적으로 클라이언트에게 방대한 양의 스크립트를 보내는 것을 거꾸로했습니다. 그렇다면 왜 최소화해야합니까?

— Stokely

1

우리가 할 수있는 한 최대한 적게 송금해야합니까? 나는 물건을 최소한으로 유지하려고 노력합니다.

— Scott Fraley

0

MVC 3 웹에 번들링을 추가하는 데 필요한 모든 작업을 수행했습니다 (기존 솔루션을 처음 사용합니다). Styles.Render나를 위해 작동하지 않았다. 마침내 콜론이없는 것을 발견했습니다. 마스터 페이지에서 : <%: Styles.Render("~/Content/Css") %> 왜 여전히 같은 페이지 에서 콜론 없이<% Html.RenderPartial("LogOnUserControl"); %> 작동 하는지 혼란 스럽습니다 .

— dudeNumber4
소스