Magento2: css dosyalarını değiştirmek için en iyi uygulama


14

Css dosyasını değiştirmek istiyorum pub/static/frontend/Magento/luma/en_US/css/styles-l.css.
Başlangıçta bu dosya pub / static klasöründe mevcut değil ve

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

Kullanarak statik içeriği deply zaman php bin/magento setup:static-content:deploy, pub / statik ile ilgili 2 dosya oluşturulur.
1. pub/static/frontend/Magento/luma/en_US/css/styles-l.less
2. pub/static/frontend/Magento/luma/en_US/css/styles-l.css

Ben destekli bir geliştiriciyim ve modüller geliştirirken pub / static'te mevcut olan her şeyi silme eğilimindeyim (.htaccess hariç). Bu yüzden benim için doğrudan değiştirmek için en iyi seçenek gibi görünmüyor pub/static/frontend/Magento/luma/en_US/css/styles-l.css.

Bu durumda, yukarıdaki css dosyasını değiştirmek için en iyi uygulama nedir?
1. Değişiklik yapmalı mıyım pub/static/frontend/Magento/luma/en_US/css/styles-l.lessyoksa
2. Anlayışım yanlışsa pub/static(geliştirme sırasında) her şeyi silebilirim ve değiştirmem pub/static/frontend/Magento/luma/en_US/css/styles-l.cssve asla silmem gerekir.

Yanıtlar:


19

Pub / * veya vendor / * dizinindeki dosyaları düzenlememeli / değiştirmemelisiniz. Pub dağıtım içindir ve tedarikçi, şablonunuz veya özel modüller aracılığıyla geçersiz kıldığınız varsayılan yapı içindir. Yerine:

  • app / design / frontend / {vendor} / {yourTheme} / içinde yeni bir tema oluşturun. Boş veya Luma temasını kullanabilirsiniz. Boş'tan miras alan yeni bir tema da oluşturabilirsiniz (devralma, theme.xml içinde tanımlanmıştır). Zaten bir tema kullanıyorsanız bu adımı atlayın.
  • .less'i temanız içinde düzenleyin, böylece değişiklikler görünür kalır ve önbelleği temizlerken veya sistemi yükseltirken değiştirilmez.
  • .Less dosyasını dağıtım dosyalarına derlemek için grunt kullanın.
  • Ayrıca, daha verimli olabilmeniz için stilinizi tema .less dosyalarına sabitlemek için kaynak haritaları da ayarlayabilirsiniz.

Bazı faydalı referanslar:


Teşekkür ederim. Temayı kullanıyorum Templatemonster/themeve temada styles-l.lessmevcut değil. Ben kopya mı vendor/magento/theme-frontend-blank/web/css/styles-l.lessüzere app/design/frontend/Templatemonster/theme/web/css/styles-l.lesskullanımına / değiştirmek?
— amitshree

2
Hayır, Templatemonster / theme - styles - * içindeki daha az dosyayı düzenlemelisiniz. Pub dizinindeki daha az dosya zaten temanızdan ve diğer kaynaklardan derlenmiş ve değiştirilmeden / değiştirilmeden bahsedilmiştir. TM temanızdaki dosyalarınızı düzenlemeyi bitirdiğinizde, pub klasörüne dağıtılacak nihai kaynaklara derlemek için grunt çalıştırın. Temanızdaki daha az dosyayı sabitlemek için kaynak haritalarını da kullanabilirsiniz.
— g5wx

Tekrar teşekkürler. Ben de sınıflar mevcut özelliğini değiştirmek için varsa sadece onu netleştirmek için styles-l.lessbir magento/theme-frontend-blankI / kullanıyorum TM tema herhangi biri (veya yeni) içinde css dosyalarını bu sınıfları üzerine ve buna göre değiştirmek gerekir tema. Does magento/theme-frontend-blanktema ile aynı şekilde davranır base/defaultMagento1 çalışıyordu tema?
— amitshree

1
Evet, oluşturmak istediğiniz değişikliklerin şablonunuzda yansıtılması gerekir, böylece değişiklik kapsamı bu şablonda yerel kalır ve yükseltmelerde geçersiz kılınmaz. M2'deki boş şablon, M1'deki Varsayılan ile aynı temel işleve sahiptir - bu, temel tanımların önceden oluşturulmuş olması ve genişletilmiş temanızın değiştirmediğiniz öğeler için bir yedeği olabilir.
— g5wx

4

Bu yaklaşım benim için çalıştı

.Less dosyasında gerekli değişiklikleri yapın ve aşağıdaki komutları çalıştırın:

php bin/magento setup:upgrade

php bin/magento cache:flush

3

Başka bir tema yapılandırmanız gerekiyorsa:

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'
    }
};

2
Dev / tools / grunt / configs / theme.js dosyasında
— Patrick-Peng

3

Bu, magento2'nin css dosyalarını nasıl işlediği akış şemasıdır.

resim açıklamasını buraya girin

Kaynak: Inchoo


0

Yürütmeyi öneririm

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

Bildiğiniz gibi,

php bin/magento setup:upgrade

önbelleği ve statik içeriği temizler ve

php bin/magento setup:static-content:deploy 

<mageroot>/pubklasördeki tüm temaları dağıtır. Bu komut mağazanızın ilk yüklemesini önemli ölçüde azaltır.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.