Bagaimana cara menambahkan file CSS khusus di Magento 2

30

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:

43

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

  1. Buat tema: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
  2. Pastikan Anda mengatur aplikasi Magento ke mode pengembang.
  3. 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>
  1. Terapkan tema Anda: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
  2. 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
1
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
1
@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
15

Untuk menambahkan custom css dan memuat terakhir

  1. Ikuti struktur direktori

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

  2. 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
5

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