MVC4のStyles.Render


381

では.NET MVC4どうするかプロジェクト@Styles.Render作品を?

@Styles.Render("~/Content/css")つまり、どのファイルで呼び出されていますか?

フォルダ内に「css」というファイルまたはフォルダがありませんContent


11
私のasp.net/mvc/tutorials/mvc-4/bundling-and-minificationチュートリアルを参照してください
RickAndMSFT

回答:


453

フォルダー内のBundleConfigクラス内で宣言されている特定のバンドルに含まれているファイルを呼び出していApp_Startます。

その特定のケースでは、呼び出し先@Styles.Render("~/Content/css")は "〜/ Content / site.css"を呼び出してい ます。

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

22
知っておくべきことの1つは、バンドルに既に最小化されている.cssファイルを追加しないことです。例:bootstrap.min.jsでは機能せず、bootstrap.jsでのみ機能します。これが他の人の役に立つことを願っています。
コデア2014年

5
これは、スクリプトではなく、スタイルについて話しています。bootstrap.min.jsを使用する場合は、次のようなバンドルを作成します。bundles.Add(new ScriptBundle( "〜/ bundles / bootstrap")。Include( "〜/ Scripts / bootstrap.min.js"));
Xcalibur37 2015

1
@codea私はあなたのセットアップが何であるかはわかりませんが、デフォルトではbundlerがファイルを*.min.*引き継ぎ*.*ます。
skmasq

@skmasq、これらの行を記述した時点で、私はVS2013を使用していました。今まで状況は変わっていたかもしれません。それを言及してくれてありがとう:)
codea

わかりません。WebページのファイルにCSS <link>を追加するだけで、バンドルを作成し、MVCのこれらのクレイジークラスにこれらのパスを追加するのに、どうして問題が発生するのですか。すべてのCSSリンクを、たとえばレイアウトファイルや部分ビューでスタイルシートに追加すると、それらを1か所で簡単に管理できます。これは、20年前の設計ではCSSシステムの本来の目的であったCSSスキンを作成できなくなったため、そのようなスタイルパスをハードコーディングするには不適切な設計でもあります。
Stokely 2017年

34

大文字と小文字の区別に注意してください。ファイルがある場合

/Content/bootstrap.css

Bundle.configでリダイレクトします

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

CSSは読み込まれません。


また、2番目のインクルードのスペルは異なります。
Dan Esparza 2013年

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()効果的 に1つのファイルに 結合&縮小 bootstrap.cssSite.css

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

しかし ..

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

debugがに設定さfalseれてWeb.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を使用して、データベースまたはユーザー設定からスキンパスを切り替え、パスを動的に変更するだけでWebサイトのデザイン全体を変更できます。

15年前のCSSの全体的な目的は、ユーザー制御とアプリケーション制御の両方のスタイルシート「スキン」を開発して、UIのルックアンドフィールをアプリケーションとは別に切り替え、データ構造とは無関係にコンテンツを再利用できるようにすることでした。 ....たとえば、印刷可能なバージョン、モバイル、オーディオバージョン、生のxmlなど

C#クラス、Bootstrapのような固定スタイルを使用し、サイトのテーマをアプリケーションコードとマージすることで、この「旧式の」ハードコーディングされたパスシステムに戻り、1998年のWebサイトの構築方法に戻りました。


1
それで、それで一体にminification?:s / :(
スコットフレーリー

はい。2019の開発者がcssとjavascriptを最小限に抑えながら、Angularなどのメガバイトの不要なECMAScript(Javascript)をクライアントに送信するAPIを作成するのはなぜですか?帯域幅が限られているお客様には、少ないコードまたは圧縮コードを送信して、帯域幅に制約されている場合にコードを取得できるようにしていました。つまり、14kボーモデムです。5Gが予定されているため、gif圧縮や縮小などのコード圧縮は必要ありません。それでも、結果としてクライアントに大量のスクリプトを送信することはできませんでした。それで、なぜ何かを最小化するのですか?
Stokely

1
できる限り少ない回線で送信する必要があるためです。私は確かに物事を最小限に抑えるよう努めています。
Scott Fraley

0

MVC 3 Webにバンドルを追加するために必要なすべてのことを行いました(既存のソリューションは初めてです)。 Styles.Renderうまくいきませんでした。結局、コロンが足りないことに気づきました。マスターページでは:<%: Styles.Render("~/Content/Css") %> 私はまだ(同じページには)理由について困惑して<% Html.RenderPartial("LogOnUserControl"); %>働くことなく、コロン。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.