Styles. Memberikan dalam MVC4

Jawaban:

453

Itu memanggil file yang termasuk dalam bundel tertentu yang dideklarasikan di dalam BundleConfigkelas di App_Startfolder.

Dalam kasus tertentu Panggilan ke @Styles.Render("~/Content/css")memanggil "~ / Content / site.css".

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
NunoCarmo
sumber
22
Satu hal yang perlu diketahui adalah bahwa ia tidak akan menambahkan file .css yang sudah diperkecil ke bundel. Contoh: ini tidak bekerja dengan bootstrap.min.js, hanya dengan bootstrap.js. Saya harap ini bisa membantu orang lain.
codea
5
Ini berbicara tentang gaya, bukan skrip. Jika Anda ingin menggunakan bootstrap.min.js, cukup buat bundel seperti ini: bundles.Add (ScriptBundle baru ("~ / bundles / bootstrap"). Sertakan ("~ / Scripts / bootstrap.min.js"));
Xcalibur37
1
@codea Saya tidak yakin apa pengaturan Anda, tetapi secara default bundler akan mengambil *.min.*alih *.*file.
skmasq
@skmasq, pada saat menulis baris-baris ini, saya menggunakan VS2013. Segalanya mungkin telah berubah hingga sekarang. Terima kasih telah menyebutkan itu :)
codea
Saya tidak mengerti .... mengapa harus bersusah payah membuat bundel dan menambahkan path-path itu ke kelas-kelas gila di MVC ini ketika Anda bisa menambahkan CSS <link> ke file di halaman web Anda? Jika Anda menambahkan semua tautan CSS ke lembar gaya Anda di katakan file tata letak atau tampilan sebagian, Anda dapat mengelolanya di satu tempat sederhana juga. Ini juga desain yang buruk untuk jalur Gaya kode keras seperti itu, karena Anda tidak dapat lagi membuat skin CSS yang merupakan tujuan keseluruhan sistem CSS ketika desain 20 tahun yang lalu.
Stokely
34

Berhati-hatilah dengan sensitivitas case. Jika Anda memiliki file

/Content/bootstrap.css

dan Anda mengarahkan di Bundle.config Anda ke

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

itu tidak akan memuat css.

linktoemi
sumber
Juga: Termasuk kedua dieja secara berbeda.
Dan Esparza
1
apakah ada dukungan untuk sass / less-files juga?
Manticore
12

Agak terlambat ke pesta. Tapi sepertinya tidak ada yang memiliki disebutkan
bundling & minification dari StyleBundle, jadi ..

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

panggilan masuk Application_Start():

BundleConfig.RegisterBundles(BundleTable.Bundles);            

yang pada gilirannya memanggil

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

RegisterBundles()secara efektif menggabungkan & memperkecil bootstrap.css & Site.css
ke dalam satu file,

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

Tapi ..

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

hanya bila debug diatur ke falsedalam Web.config.
Jika tidak bootstrap.css& Site.cssakan disajikan secara individual.
Tidak dibundel, juga tidak diperkecil:

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

src="@url.content("~/Folderpath/*.css")" harus menampilkan gaya

Ram
sumber
0

Sebagaimana didefinisikan dalam App_start.BundleConfig, itu hanya memanggil

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

Tidak ada yang terjadi bahkan jika Anda menghapus bagian itu.

Sathish Dadi
sumber
0

Polo saya tidak akan menggunakan Bundel di MVC karena berbagai alasan. Ini tidak berfungsi dalam kasus Anda karena Anda harus menyiapkan kelas BundleConfig khusus di folder Apps_Start Anda. Ini tidak masuk akal ketika Anda dapat menambahkan gaya sederhana di kepala html Anda seperti:

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

Anda juga dapat menambahkan ini ke Layout.cshtml atau sebagian kelas yang dipanggil dari semua tampilan Anda dan jatuh ke setiap halaman. Jika gaya Anda berubah, Anda dapat dengan mudah mengubah nama dan jalur tanpa harus mengkompilasi ulang.

Menambahkan tautan hard-coded ke CSS dalam sebuah jeda kelas dengan seluruh tujuan pemisahan UI dan desain dari model aplikasi, juga. Anda juga tidak ingin jalur lembar gaya berkode keras dikelola di c # karena Anda tidak dapat lagi membangun "skins" atau model gaya terpisah untuk mengatakan perangkat yang berbeda, tema, dll. Seperti:

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

Dengan menggunakan sistem ini dan Razor, Anda sekarang dapat mengganti Skin Path dari basis data atau pengaturan pengguna dan mengubah seluruh desain situs web Anda dengan hanya mengubah path secara dinamis.

Seluruh tujuan CSS 15 tahun yang lalu adalah untuk mengembangkan "skin" style sheet yang dikontrol pengguna dan aplikasi dikendalikan untuk situs sehingga Anda bisa mengubah tampilan UI dan merasa terpisah dari aplikasi dan menggunakan kembali konten yang independen dari struktur data. .... misalnya versi yang dapat dicetak, seluler, versi audio, xml mentah, dll.

Dengan kembali sekarang ke sistem jalur "kuno", kode keras menggunakan kelas C #, gaya kaku seperti Bootstrap, dan menggabungkan tema situs dengan kode aplikasi, kami telah mundur lagi ke bagaimana situs web dibangun pada tahun 1998.

Stokely
sumber
1
Jadi, bagaimana kalau minificationbegitu? : s / :(
Scott Fraley
Iya. Mengapa pengembang pada 2019 meminimalkan css dan javascript tetapi kemudian membangun API seperti Angular dan lainnya yang mengirimkan megabyte ECMAScript (Javascript) yang tidak perlu ke klien? Kami dulu mengirim lebih sedikit kode atau kode terkompresi ke pelanggan dengan bandwidth terbatas sehingga mereka bisa mendapatkan kode ketika mereka dibatasi oleh bandwidth .... yaitu 14k baud modem. Kami memiliki 5G yang datang sehingga kompresi kode seperti kompresi gif atau minifikasi tidak diperlukan. Namun kami telah mundur mengirim banyak skrip ke klien sebagai hasilnya. Jadi mengapa meminimalkan sesuatu?
Stokely
1
Karena kita harus mengirimkan sesedikit mungkin melalui kawat? Saya tentu mencoba untuk menjaga hal-hal seminimal mungkin.
Scott Fraley
0

Saya melakukan semua hal yang diperlukan untuk menambahkan bundling ke web MVC 3 (saya baru dengan solusi yang ada). Styles.Rendertidak bekerja untuk saya. Saya akhirnya menemukan saya hanya kehilangan titik dua. Di halaman master: <%: Styles.Render("~/Content/Css") %> Saya masih bingung mengapa (di halaman yang sama) <% Html.RenderPartial("LogOnUserControl"); %>bekerja tanpa tanda titik dua.

dudeNumber4
sumber