Magento2: Best Practice zum Ändern von CSS-Dateien

14

Ich möchte die CSS-Datei ändern pub/static/frontend/Magento/luma/en_US/css/styles-l.css.
Anfangs ist diese Datei nicht im pub / static-Ordner und in vorhanden

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

Wenn ich statische Inhalte verwende php bin/magento setup:static-content:deploy, werden in pub / static 2 dazugehörige Dateien erstellt.
1. pub/static/frontend/Magento/luma/en_US/css/styles-l.less
2. pub/static/frontend/Magento/luma/en_US/css/styles-l.css

Ich bin ein unterstützter Entwickler und neige dazu, während der Entwicklung von Modulen alles zu löschen, was in pub / static vorhanden ist (außer .htaccess). Daher scheint es mir nicht die beste Möglichkeit zu sein, Änderungen direkt vorzunehmen pub/static/frontend/Magento/luma/en_US/css/styles-l.css.

Was ist in diesem Fall die beste Vorgehensweise, um die obige CSS-Datei zu ändern?
1. Soll ich ändern pub/static/frontend/Magento/luma/en_US/css/styles-l.lessoder
2. Mein Verständnis ist falsch, dass ich alles aus pub/static(während der Entwicklung) löschen kann und ich sollte es ändern pub/static/frontend/Magento/luma/en_US/css/styles-l.cssund niemals löschen.

magento2 css frontend best-practice amitshree
quelle

19

Sie sollten keine Dateien im Verzeichnis pub / * oder vendor / * bearbeiten / ändern. Pub ist für die Bereitstellung und Vendor für die Standardstruktur, die Sie über Ihre Vorlage oder benutzerdefinierte Module überschreiben. Stattdessen:

erstelle ein neues Theme in app / design / frontend / {vendor} / {yourTheme} /. Sie können Blank oder Luma Theme verwenden. Sie können auch ein neues Design erstellen, das von Blank erbt (die Vererbung wird in theme.xml definiert). Wenn Sie bereits ein Thema verwenden, überspringen Sie diesen Schritt.
Bearbeiten Sie .less innerhalb Ihres Themas, damit die Änderungen sichtbar bleiben und nicht ersetzt werden, wenn Sie den Cache leeren oder das System aktualisieren.
Verwenden Sie grunt, um Ihre .less-Datei in Bereitstellungsdateien zu kompilieren.
Sie können auch Sourcemaps einrichten, um Ihr Styling innerhalb der .less-Dateien des Themas festzulegen und so produktiver zu werden.

Einige nützliche Hinweise:

g5wx
quelle

Vielen Dank. Ich verwende ein Thema Templatemonster/themeund bin im Thema styles-l.lessnicht vorhanden. Soll ich kopieren vendor/magento/theme-frontend-blank/web/css/styles-l.less, app/design/frontend/Templatemonster/theme/web/css/styles-l.lessum es zu verwenden / zu ändern?

Amitshree

2

Nein, Sie sollten weniger Dateien in Templatemonster / theme - styles bearbeiten. * Weniger Dateien in pub directory sind bereits kompilierte Dateien aus Ihrem Thema und anderen Ressourcen und dürfen nicht geändert werden. Wenn Sie die Bearbeitung Ihrer Dateien in Ihrem TM-Design abgeschlossen haben, führen Sie grunt aus, um sie zu endgültigen Ressourcen zu kompilieren, die im Pub-Ordner bereitgestellt werden. Sie können auch Sourcemaps verwenden, um die wenigen Dateien aus Ihrem Thema herauszufinden.

g5wx

Danke noch einmal. Nur um es zu klären, ob ich Eigentum von Klassen in ändern , haben styles-l.lessvon magento/theme-frontend-blankThema sollte ich diese Klassen in einem der Punkte (oder neu) CSS - Dateien in meinem TM Thema und ändern entsprechend verwenden / überschreiben. Verhält sich magento/theme-frontend-blankTheme genauso wie base/defaultTheme in Magento1?

Amitshree

1

Ja, Änderungen, die Sie erstellen möchten, sollten in Ihrer Vorlage berücksichtigt werden, damit der Änderungsumfang in dieser Vorlage lokal bleibt und bei Upgrades nicht überschrieben wird. Leere Vorlagen in M2 haben die gleiche Grundfunktion wie Standard in M1 - das heißt, es werden bereits Basisdefinitionen erstellt, und Ihr erweitertes Design kann auf Elemente zurückgreifen, die Sie nicht ändern.

g5wx

4

Dieser Ansatz hat bei mir funktioniert

Nehmen Sie die erforderlichen Änderungen in der .less-Datei vor und führen Sie die folgenden Befehle aus:

php bin/magento setup:upgrade

php bin/magento cache:flush

adityaekawade
quelle

3

Wenn Sie ein anderes Thema konfigurieren möchten:

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
quelle

2

In der Datei dev / tools / grunt / configs / theme.js

Patrick-Peng

3

Dies ist das Flussdiagramm, wie magento2 CSS-Dateien verarbeitet.

Quelle: Inchoo

Prinz Patel
quelle

0

Ich würde die Hinrichtung vorschlagen

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

Wie Sie wissen würden,

php bin/magento setup:upgrade

Bereinigt den Cache und den statischen Inhalt

php bin/magento setup:static-content:deploy

stellt alle Themen im <mageroot>/pubOrdner bereit. Durch diesen Befehl wird die erstmalige Belastung Ihres Geschäfts erheblich reduziert.

Aakash
quelle

Magento2: Best Practice zum Ändern von CSS-Dateien

Antworten: