Magento2: best practice per modificare i file CSS

14

Voglio modificare il file CSS pub/static/frontend/Magento/luma/en_US/css/styles-l.css.
Inizialmente questo file non è presente nella cartella pub / static ed è presente in

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

Quando descrivo i contenuti statici utilizzando php bin/magento setup:static-content:deploy, vengono creati 2 file in pub / static correlati ad esso.
1. pub/static/frontend/Magento/luma/en_US/css/styles-l.less
2. pub/static/frontend/Magento/luma/en_US/css/styles-l.css

Sono uno sviluppatore supportato e durante lo sviluppo di moduli tendo a eliminare tutto ciò che è presente in pub / static (tranne .htaccess). Quindi per me non sembra essere la migliore opzione per modificare direttamente pub/static/frontend/Magento/luma/en_US/css/styles-l.css.

In tal caso qual è la migliore pratica per modificare sopra il file CSS?
1. Devo modificare pub/static/frontend/Magento/luma/en_US/css/styles-l.lesso
2. La mia comprensione è errata da cui posso eliminare tutto pub/static(durante lo sviluppo) e dovrei modificarlo pub/static/frontend/Magento/luma/en_US/css/styles-l.csse non eliminarlo mai.

— amitshree
fonte

19

Non è possibile modificare / modificare i file nella directory pub / * o vendor / *. Pub è per la distribuzione e il fornitore è per la struttura predefinita, che viene sovrascritta tramite il modello o i moduli personalizzati. Anziché:

crea un nuovo tema all'interno di app / design / frontend / {vendor} / {yourTheme} /. Puoi usare il tema Vuoto o Luma. Puoi anche creare un nuovo tema che eredita da Vuoto (l'ereditarietà è definita in theme.xml). Se stai già utilizzando un tema, salta questo passaggio.
modifica .less all'interno del tema in modo che le modifiche rimangano visibili e non vengano sostituite quando si svuota la cache o si aggiorna il sistema.
Usa grunt per compilare il tuo .less in file di distribuzione.
Puoi anche impostare mappe di origine in modo che punti il tuo stile all'interno dei file .less del tema in modo da poter essere più produttivo.

Alcuni riferimenti utili:

— g5wx
fonte

Grazie. Sto usando il tema Templatemonster/themee styles-l.lessnon è presente nel tema. Devo copiarlo vendor/magento/theme-frontend-blank/web/css/styles-l.lessper app/design/frontend/Templatemonster/theme/web/css/styles-l.lessusarlo / modificarlo?

— entro l'

2

No, dovresti modificare meno file all'interno di Templatemonster / theme - styles - *. Meno file nella directory pub sono già file compilati dal tuo tema e da altre risorse e non devono essere modificati / alterati. Al termine della modifica dei file all'interno del tema TM, eseguire grunt per compilarli in risorse finali, che verranno distribuiti nella cartella pub. Puoi anche utilizzare le mappe di origine per individuare il numero minore di file dal tema.

— g5wx,

Grazie ancora. Giusto per chiarire, se devo modificare la proprietà delle classi presenti in styles-l.lessdel magento/theme-frontend-blanktema devo usare / sovrascrivere quelle classi in una qualsiasi delle (o nuovo) file CSS nel mio tema TM e modificare di conseguenza. Il magento/theme-frontend-blanktema si comporta allo stesso modo del base/defaulttema in Magento1?

— entro l'

1

Sì, tutte le modifiche che desideri creare devono essere riflesse nel tuo modello in modo che l'ambito della modifica rimanga locale all'interno di quel modello e non venga sostituito dagli aggiornamenti. Il modello vuoto in M2 ha la stessa funzione di base di Default in M1 - ovvero avere già una definizione di base già creata e il tema esteso può avere un fallback per gli elementi che non si modificano.

— g5wx,

4

Questo approccio ha funzionato per me

Apportare le modifiche necessarie nel file .less e quindi eseguire i seguenti comandi:

php bin/magento setup:upgrade

php bin/magento cache:flush

— adityaekawade
fonte

3

Se un altro tema dovresti configurare:

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
fonte

2

Nel file dev / tools / grunt / configs / theme.js

— Patrick-Peng,

3

Questo è il diagramma di flusso che indica come magento2 elabora i file CSS.

Fonte: Inchoo

— Prince Patel
fonte

0

Suggerirei l'esecuzione

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

Come sapresti,

php bin/magento setup:upgrade

pulirà la cache e il contenuto statico e

php bin/magento setup:static-content:deploy

distribuirà tutti i temi nella <mageroot>/pubcartella. Questo comando ridurrà significativamente il carico iniziale del tuo negozio.

— Aakash
fonte