Magento2: najlepsza praktyka modyfikowania plików css

14

Chcę zmodyfikować plik css pub/static/frontend/Magento/luma/en_US/css/styles-l.css.
Początkowo ten plik nie znajduje się w folderze pub / static i jest obecny w

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

Kiedy używam zawartości statycznej za pomocą php bin/magento setup:static-content:deploy, tworzone są 2 pliki w pub / static z nią powiązane.
1. pub/static/frontend/Magento/luma/en_US/css/styles-l.less
2. pub/static/frontend/Magento/luma/en_US/css/styles-l.css

Jestem programistą wspieranym i podczas tworzenia modułów staram się usuwać wszystko, co jest obecne w pub / static (oprócz .htaccess). Więc nie wydaje mi się, że jest to najlepsza opcja do bezpośredniej modyfikacji pub/static/frontend/Magento/luma/en_US/css/styles-l.css.

W takim przypadku jaka jest najlepsza praktyka do modyfikowania powyższego pliku css?
1. Mam zmodyfikować pub/static/frontend/Magento/luma/en_US/css/styles-l.lesslub
2. Mam błędne zrozumienie, że mogę usunąć wszystko z pub/static(podczas programowania) i powinienem modyfikować pub/static/frontend/Magento/luma/en_US/css/styles-l.cssi nigdy go nie usuwać.

amitshree
źródło

Odpowiedzi:

19

Nie należy edytować / modyfikować plików w katalogu pub / * lub vendor / *. Pub jest przeznaczony do wdrożenia, a dostawca ma domyślną strukturę, którą zastępujesz za pomocą szablonu lub modułów niestandardowych. Zamiast:

  • utwórz nowy motyw w aplikacji / design / frontend / {vendor} / {yourTheme} /. Możesz użyć motywu Blank lub Luma. Możesz także utworzyć nowy motyw, który dziedziczy z Pustego (dziedziczenie jest zdefiniowane w pliku theme.xml). Jeśli używasz już jakiegoś motywu, pomiń ten krok.
  • edytuj .less w swoim motywie, aby zmiany pozostały widoczne i nie zostaną zastąpione podczas czyszczenia pamięci podręcznej lub aktualizacji systemu.
  • Użyj grunt, aby skompilować plik .less w plikach wdrażania.
  • Możesz także skonfigurować sourcemaps, aby precyzyjnie określić styl w plikach .less motywu, dzięki czemu możesz być bardziej produktywny.

Kilka przydatnych odniesień:

g5wx
źródło
Dziękuję Ci. Używam motywu Templatemonster/themei styles-l.lessnie ma go w motywie. Czy powinienem skopiować, vendor/magento/theme-frontend-blank/web/css/styles-l.lessaby app/design/frontend/Templatemonster/theme/web/css/styles-l.lessgo użyć / zmodyfikować?
amitshree
2
Nie, powinieneś edytować mniej plików w Templatemonster / theme - styles - *. Mniej plików w katalogu pub jest już skompilowanymi plikami z twojego motywu i innych zasobów i nie należy ich modyfikować / zmieniać. Po zakończeniu edycji plików w motywie TM uruchom chrząknięcie, aby skompilować je do końcowych zasobów, które zostaną wdrożone w folderze pub. Możesz także użyć sourcemap, aby wskazać mniej plików z motywu.
g5wx
Dzięki jeszcze raz. Wystarczy je wyjaśnić, jeśli mam do modyfikowania właściwości klas Obecnie w styles-l.lessod magento/theme-frontend-blanktematu należy użyć / nadpisać te klasy w dowolnym (lub nowe) pliki CSS w moim TM tematu i odpowiednio zmodyfikować. Czy magento/theme-frontend-blankmotyw zachowuje się tak samo, jak base/defaultmotyw działał w Magento1?
amitshree
1
Tak, wszelkie zmiany, które chcesz utworzyć, powinny zostać odzwierciedlone w szablonie, aby zakres modyfikacji pozostał lokalny w tym szablonie i nie był nadpisywany po uaktualnieniach. Pusty szablon w M2 ma tę samą podstawową funkcję, co Domyślny w M1 - to znaczy, że już utworzono podstawowe definicje, a Twój rozszerzony motyw może mieć rezerwę na elementy, których nie modyfikujesz.
g5wx
4

To podejście zadziałało dla mnie

Wprowadź niezbędne zmiany w pliku .less, a następnie uruchom następujące polecenia:

php bin/magento setup:upgrade

php bin/magento cache:flush
adityaekawade
źródło
3

Jeśli inny motyw należy skonfigurować:

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
źródło
2
W pliku dev / tools / grunt / configs / theme.js
Patrick-Peng
3

Jest to schemat blokowy przetwarzania plików css przez magento2.

wprowadź opis zdjęcia tutaj

Źródło: Inchoo

Książę Patel
źródło
0

Sugerowałbym wykonanie

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

Jak byś wiedział

php bin/magento setup:upgrade

wyczyści pamięć podręczną i zawartość statyczną oraz

php bin/magento setup:static-content:deploy 

wdroży wszystkie kompozycje w <mageroot>/pubfolderze. To polecenie znacznie zmniejszy obciążenie Twojego sklepu po raz pierwszy.

Aakash
źródło