utworzono 3 lipca 2017 r., ostatnia aktualizacja 3 lipca 2017 r.
Z CE 1.9 Magento wprowadził SASS język arkusza stylów, aby wspomóc rozwój frontendu. Z Magento 2.x za powody najlepiej znane twórcom zmienili się z SASS na LESS. Pod koniec dnia zarówno LESS, jak i SASS są kompilowane w stary dobry CSS, ale jeśli preferowanym językiem arkusza stylów jest SASS lub jesteś nowym użytkownikiem Magento i szukasz dobrego bloku początkowego do zbudowania nowego motywu, to jest to warte spojrzeć na SnowDogApps pusty projekt sass .
The Mniej do projektu społeczności Sass jest oficjalnie wspierany przez Magento i Theme Blank SASS jest wynikiem tego projektu - (gotowy do produkcji) Magento 2 pusty motyw przekonwertowany do SASS.
Wraz z towarzyszeniem Pakiet Fronttools otrzymujesz narzędzia programistyczne i rozszerzalny pusty motyw oparty na SASS, który potrzebujesz, aby rozpocząć tworzenie własnego niestandardowego motywu.
- Jeśli pochodzisz z Magento 1.9, to już znasz SASS
- Magento 2.x może w przyszłości przenieść się do SASS
- LUMA nie jest przeznaczony do rozszerzenia jako pusty temat
- Dołączone są podstawowe narzędzia programistyczne, takie jak browsersync
Możesz być uruchomiony z pustym motywem SASS i fronttools w ciągu kilku minut. Oto temat krok po kroku pusty przewodnik instalacji sass i frontools przetestowany na moim Pojemniki dokujące Magento 2.x.
Instaluję motyw nadrzędny i narzędzia fronttools bezpośrednio w kontenerze php-apache dokera Magento 2 ze skryptem bash:
curl -o- http://gaiterjones.com/dropbox/magento2/theme-blank-sass/install-theme-blank-sass.sh | grzmotnąć
skrypt instalujący sass i fronttools
Oto polecenia skryptów podzielone na bardziej szczegółowe informacje:
Ustaw zmienne środowiskowe instalacji
cd $ {MAGENTO_DIR} MAGENTO_DIR = '/ var / www / dev / magento2' NVM_HOME = '/ var / www'MAGENTO_DIR jest ścieżką do roota magento i NVM_HOME ścieżką do folderu domowego instalacji NVM - jest to folder domowy dla użytkownika, który instaluje NVM
Zainstaluj motyw i narzędzia z kompozytorem, uaktualnij Magento i odśwież pamięć podręczną.
kompozytor wymaga tematu snowdog / blank-sassinstall pusty sass kompozytor wymaga snowdog / frontoolsinstall fronttools $ {MAGENTO_DIR} / bin / magento setup: upgradeupdate Magento $ {MAGENTO_DIR} / bin / magento cache: cleanrefresh cacheZainstaluj NVM i gulp-cli
cd / tmp curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash export NVM_DIR = $ {NVM_HOME} /. nvm [-s "$ NVM_DIR / nvm.sh"] && „$ NVM_DIR / nvm.sh” nvm install --lts nvm use --lts npm install -g gulp-cliZainstaluj frontools.
Instalacja cd $ {MAGENTO_DIR} / vendor / snowdog / frontools npmUruchamiasz konfigurację fronttools z ustawieniem gulp , spowoduje to skopiowanie plików konfiguracyjnych próbki projektu do $ {MAGENTO_DIR} / dev / tools / frontools / config /. Musisz edytować motywy.json dla tematu nadrzędnego.
{"blank": {"src": "vendor / snowdog / theme-blank-sass", "dest": "pub / static / frontend / Snowdog / blank", "locale": ["en_GB"], "postcss ": [" plugins.autoprefixer () "]," ignore ": [" .test "]}}Skrypt kopiuje moje motywy i pliki konfiguracyjne json z synchronizacją przeglądarki za pomocą curl.
gulp setup curl -o "$ {MAGENTO_DIR} /dev/tools/frontools/config/themes.json" http://gaiterjones.com/dropbox/magento2/theme-blank-sass/browser-sync.json curl -o " $ {MAGENTO_DIR} /dev/tools/frontools/config/themes.json "http://gaiterjones.com/dropbox/magento2/theme-blank-sass/themes-blank-sass-parent.json style gulpNastępnie kompiluję SASS do CSS i instaluję go za pomocą
style łykaWreszcie używam n98-magerun2 aby włączyć nowy motyw i odświeżyć pamięci podręczne Magento.
THEME_ID = "$ (n98-magerun2.phar dev: theme: list --format = csv | grep 'Snowdog / blank' | cut -d, -f1)" test -n "$ {THEME_ID}" & n98-magerun2.phar config: set design / theme / theme_id "$ {THEME_ID}" $ {MAGENTO_DIR} / bin / magento cache: czyste
Motyw macierzysty SASS pusty jest już zainstalowany. Możesz obejrzeć proces instalacji poniżej.
Korzystaliśmy z ustawień łyków i zadań związanych z przełykaniem powyżej - inne przydatne zadania obejmują
- łyk czysty
- Usuwa zawartość katalogu / pub / static.
- gulp dev
- Biegnie browserSync i dziedziczenie, babel, style, obserwuj zadania.
Zobacz stronę projektu fronttools, aby zapoznać się z pełną listą zadań do wypicia lub użyj domyślnego zadania Gulp.
Zwykle najlepsza praktyka Magento nakazuje, że zamiast edytować je, rozszerzamy je o motyw potomny. Rozszerzasz Snowdoga / puste tak samo jak każdy inny temat .
<motyw xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi: noNamespaceSchemaLocation = "urn: magento: framework: Config / etc / theme.xsd"> <title> Gaiterjones / blank < / title> <parent> Snowdog / blank </parent> <media> <preview_image> media / preview.jpg </preview_image> </media> </theme>Przetestowałem to w moim środowisku Docker i użyłem następującego skryptu do rozszerzenia pustego SASS motywu za pomocą moich Gaiterjones / pustych motywów potomnych.
curl -o- http://gaiterjones.com/dropbox/magento2/theme-blank-sass/child/install-child-theme-blank-sass.sh | grzmotnąć
skrypt do instalacji pustego motywu potomnego sass #! / bin / bash # GAITERJONES # blog.gaiterjones.com # skrypt do zainstalowania przykładowego pustego-sassa tematu potomnego # zestawu -e # zmiennych RED = '033 [0; 31m 'NC =' 033 [0m '# ZMIANA TEGO MAGENTO_DIR =' / var / www / dev / magento2 'NVM_HOME =' / var / www '# start printf "$ {RED} Instalowanie motywu potomnego sass z pustymi motywami do Magento Root: $ {MAGENTO_DIR} ... n $ {NC} "n98-magerun2.phar maintenance: włącz cd $ {MAGENTO_DIR} / app / design / frontend curl https://pe.terjon.es/dropbox /magento2/theme-blank-sass/child/gaiterjones-blank-child-theme-blank-sass.tar | tar x $ {MAGENTO_DIR} / bin / magento setup: upgrade cd $ {MAGENTO_DIR} / vendor / snowdog / frontools printf "$ {RED} Konfiguracja Gaiterjones / pustego motywu. n $ {NC}" THEME_ID = "$ (n98- magerun2.phar dev: theme: list --format = csv | grep 'Gaiterjones / blank' | cut -d, -f1) " test -n "$ {THEME_ID}" & n98-magerun2.phar config: set design / theme / theme_id "$ {THEME_ID}" printf "$ {RED} Instalowanie nowej konfiguracji themes.json ... n $ {NC } "curl -o" $ {MAGENTO_DIR} /dev/tools/frontools/config/themes.json "https://gaiterjones.com/dropbox/magento2/theme-blank-sass/child/themes-blank-sass-parent -child.json printf "$ {RED} Generowanie stylów sass-blank-sass ... n $ {NC}" export NVM_DIR = $ {NVM_HOME} /. nvm [-s "$ NVM_DIR / nvm.sh"] && . "$ NVM_DIR / nvm.sh" style gulp $ {MAGENTO_DIR} / bin / magento cache: clean n98-magerun2.phar maintenance: wyłącz # done printf "$ {RED} Instalacja zakończona.Skrypt wyodrębnia Gaiterjony / puste pliki źródłowe motywu potomnego do app / design / frontend / Gaiterjones / blank i aktualizuje Magento. Musimy również zaktualizować plik konfiguracyjny fronttools themes.json , aby fronttools wiedziały, gdzie mieszka nasza motywacja potomna
{"blank": {"src": "vendor / snowdog / theme-blank-sass", "dest": "pub / static / frontend / Snowdog / blank", "locale": ["en_GB"], "postcss ": [" plugins.autoprefixer () "]," ignore ": [" .test "]}," gaiterjones-blank ": {" src ":" app / design / frontend / Gaiterjones / blank "," dest " : „pub / static / frontend / Gaiterjones / blank”, „locale”: [„en_GB”], „localeOverwrites”: true, „parent”: „blank”, „postcss”: [”plugins.autoprefixer ()”] }}Następnie aktywuję motyw za pomocą n98-magerun2, a następnie po prostu muszę odświeżyć bufory i ponownie uruchomić style gulp, aby utworzyć CSS dla naszego motywu potomnego.
style gulp $ {MAGENTO_DIR} / bin / magento cache: czysteFronttools kompiluje i instaluje CSS dla naszego motywu potomnego, który jest teraz zainstalowany i gotowy do wyświetlenia.
Możesz zobaczyć pusty motyw SASS w akcji na moim strona rozwoju .