Magento2: Praktik terbaik untuk memodifikasi file css

14

Saya ingin memodifikasi file css pub/static/frontend/Magento/luma/en_US/css/styles-l.css.
Awalnya file ini tidak ada di folder pub / statis dan itu ada di

vendor/magento/theme-frontend-blank/web/css/styles-l.less (it's styles-l.less)

Ketika saya menghilangkan konten statis menggunakan php bin/magento setup:static-content:deploy, 2 file dibuat di pub / statis yang terkait dengannya.
1. pub/static/frontend/Magento/luma/en_US/css/styles-l.less
2. pub/static/frontend/Magento/luma/en_US/css/styles-l.css

Saya adalah pengembang yang didukung dan saat mengembangkan modul saya cenderung menghapus apa pun yang ada di pub / statis (kecuali .htaccess). Jadi bagi saya sepertinya itu bukan pilihan terbaik untuk langsung memodifikasi pub/static/frontend/Magento/luma/en_US/css/styles-l.css.

Dalam hal apa praktik terbaik untuk memodifikasi file css di atas?
1. Haruskah saya mengubah pub/static/frontend/Magento/luma/en_US/css/styles-l.lessatau
2. Pemahaman saya salah bahwa saya dapat menghapus semuanya dari pub/static(selama pengembangan) dan saya harus memodifikasi pub/static/frontend/Magento/luma/en_US/css/styles-l.cssdan tidak pernah menghapusnya.

magento2 css frontend best-practice amitshree
sumber

Jawaban:

19

Anda tidak boleh mengedit / memodifikasi file di dalam direktori pub / * atau vendor / *. Pub untuk penyebaran dan vendor untuk struktur default, yang Anda timpa melalui template atau modul khusus Anda. Sebagai gantinya:

  • buat tema baru di dalam aplikasi / desain / antarmuka / {vendor} / {tema Anda} /. Anda dapat menggunakan tema Kosong atau Luma. Anda juga dapat membuat tema baru yang diwarisi dari Blank (pewarisan didefinisikan dalam theme.xml). Jika Anda sudah menggunakan beberapa tema maka lewati langkah ini.
  • edit .less dalam tema Anda sehingga perubahan tetap terlihat dan tidak diganti saat membersihkan cache atau memutakhirkan sistem.
  • Gunakan gerutuan untuk mengkompilasi .less Anda ke file penyebaran.
  • Anda juga dapat mengatur peta sumber untuk menunjukkan gaya Anda dalam file tanpa tema sehingga Anda bisa lebih produktif.

Beberapa referensi yang bermanfaat:

g5wx
sumber
Terima kasih. Saya menggunakan tema Templatemonster/themedan styles-l.lesstidak ada dalam tema. Haruskah saya menyalin vendor/magento/theme-frontend-blank/web/css/styles-l.lesske app/design/frontend/Templatemonster/theme/web/css/styles-l.lessuntuk menggunakan / memodifikasinya?
amitshree
2
Tidak, Anda harus mengedit lebih sedikit file di dalam Templatemonster / theme - styles - *. Less file di dalam direktori pub sudah mengkompilasi file dari tema Anda dan sumber daya lainnya dan tidak boleh dimodifikasi / diubah. Ketika Anda selesai mengedit file dalam tema TM Anda jalankan grunt untuk mengkompilasinya menjadi sumber daya final, yang akan digunakan dalam folder pub. Anda juga dapat menggunakan peta sumber untuk menunjukkan lebih sedikit file dari tema Anda.
g5wx
Terima kasih lagi. Hanya untuk mengklarifikasi itu, jika saya harus memodifikasi properti dari kelas hadir dalam styles-l.lessdari magento/theme-frontend-blanktema saya harus menggunakan / menimpa orang-orang kelas di salah (atau baru) file css dalam tema TM saya dan memodifikasi sesuai. Apakah magento/theme-frontend-blanktema berperilaku sama seperti base/defaulttema berfungsi di Magento1?
amitshree
1
Ya, setiap perubahan yang ingin Anda buat harus tercermin dalam template Anda sehingga ruang lingkup modifikasi tetap lokal di dalam template itu dan tidak mendapatkan penggantian setelah upgrade. Templat kosong di M2 memiliki fungsi dasar yang sama seperti Default di M1 - yaitu memiliki definisi dasar yang sudah dibuat dan tema Anda yang diperluas dapat memiliki cadangan untuk elemen yang tidak Anda modifikasi.
g5wx
4

Pendekatan ini berhasil bagi saya

Buat perubahan yang diperlukan dalam file .less dan kemudian jalankan perintah berikut: 

php bin/magento setup:upgrade

php bin/magento cache:flush
adityaekawade
sumber
3

Jika tema lain Anda harus mengkonfigurasi:

module.exports = {
    blank: {
        area: 'frontend',
        name: 'Magento/blank',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },
    luma: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

    porto: {
        area: 'frontend',
        name: 'Smartwave/porto',
        locale: 'zh_Hans_CN',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

    backend: {
        area: 'adminhtml',
        name: 'Magento/backend',
        locale: 'en_US',
        files: [
            'css/styles-old',
            'css/styles'
        ],
        dsl: 'less'
    }
};
Patrick-Peng
sumber
2
Dalam file dev / tools / grunt / configs / theme.js
Patrick-Peng
3

Ini adalah diagram alur yang bagaimana magento2 memproses file css.

masukkan deskripsi gambar di sini

Sumber: Inchoo

Pangeran Patel
sumber
0

Saya akan menyarankan eksekusi

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Seperti yang Anda tahu, 

php bin/magento setup:upgrade

akan membersihkan cache dan konten statis, dan 

php bin/magento setup:static-content:deploy

akan menggunakan semua tema dalam <mageroot>/pubfolder. Perintah ini akan secara signifikan mengurangi beban pertama kali toko Anda.

Aakash
sumber