Bagaimana cara menambahkan file CSS khusus di Magento 2

Apakah ada cara untuk membuat file CSS saya sendiri yang memuat terakhir di kaskade?

Jika demikian, bagaimana dan di mana saya menambahkan file CSS khusus saya?

magento2 css

— H. Ferrence
sumber

Jawaban:

Untuk menambahkan custom css dan memuat yang terakhir, Anda harus mengatur tema khusus.

Buat tema: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
Pastikan Anda mengatur aplikasi Magento ke mode pengembang.
Tambahkan folder berikut ke tema khusus Anda

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

Buat file berikut:

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

tempatkan kode ini di dalam default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>

Terapkan tema Anda: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
Menyebarkan sumber daya statis (SSH ke magento root):

php bin/magento setup:static-content:deploy

— Yosua34
sumber

Hai, saya baru saja melakukannya, tetapi file css yang saya tambahkan, tidak dimuat, dan ketika saya memeriksa halaman itu memberi saya kesalahan GET untuk file tersebut, dengan 500 (Kesalahan Server Internal) apakah Anda tahu apa itu mungkin?

— alexcr

Perintah CLI untuk menyebarkan: setup php bin / magento: static-content: deploy

— Joshua34

Apa yang harus saya masukkan ke dalam dua file CSS baru yang saya buat? Hanya CSS murni ??

— styzzz

@styzzz ya, css mentah ok.

— Joshua34

Ya. Saya baru saja melakukannya, mengunggah file local-m.css dan local-l.css ke web / css .... membersihkan cache dan menjalankan setup php bin / magento: static-content: deploy. Saya dalam mode pengembang. Masih belum mengambilnya. Default_head_blocks.xml saya persis seperti di atas. Tapi ini masih belum menggunakan stypes yang saya atur di CSS

— styzzz

Untuk menambahkan custom css dan memuat terakhir

Ikuti struktur direktori

app / code / vendor / modulename / view / frontend (untuk admin adminhtml) / web / css / filename.css

Tambahkan jalur file css ke file tata letak yang sesuai seperti yang diberikan di bawah ini

<head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>

— Manish
sumber

Termasuk Vendor_Moduletidak bekerja untuk saya. Menghapusnya berfungsi dengan baik.

— Saravanan DS

@SaravananDS Anda perlu mengganti dengan nama paket dan modul Anda.

— Manish

Iya nih. Setelah mengganti dengan kebiasaan saya Vendor_Modulehanya itu tidak berfungsi.

— Saravanan DS

@ Bahasa Spanyol, bisakah kita memuat file css khusus hanya di halaman hasil pencarian?

— jafar pinjar

Di sini tidak perlu menggunakan tema anak?

— HaFiz Umer

Anda dapat menambahkan atribut media yang akan diletakkan magento 2 ke bagian akhir css di bagian kepala. Mengatur lebar hanya 1px akan mengaktifkannya di semua perangkat:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>

— Cypher909
sumber

terima kasih, kamu menyelamatkan hariku. Saya tidak ingin bekerja dengan file .less dan kompilasi setiap kali saya mengeditnya.

— bourax

di sini tidak perlu membuat tema khusus terlebih dahulu?

— HaFiz Umer

@HaFizUmer Anda harus membuat tema khusus terlebih dahulu. Ikuti instruksi dari jawaban yang diterima dan kemudian gunakan metode yang saya tunjukkan di sini.

— Cypher909