створаны 3 ліпеня 2017 г., Апошняе абнаўленне 3 ліпеня 2017 г.
З CE 1.9 Magento прадставіў SASS мова табліцы стыляў, каб дапамагчы распрацоўцы інтэрфейсу. З Magento 2.x для прычыны найбольш вядомыя распрацоўнікам яны перайшлі ад SASS да LESS. У рэшце рэшт і LESS, і SASS складзены ў стары добры CSS, але калі ваш стыль мовы пераваг SASS ці вы пачатковец у Magento і шукаеце добры стартавы блок для стварэння новай тэмы, то тады яно варта зірнуў на SnowDogApps Тэма пусты праект Sass ,
Менш Sass праекта супольнасці афіцыйна падтрымліваецца Magento і Theme Blank SASS - вынік гэтага праекта - пустая тэма Magento 2 (пераўтвораная ў гатоўнасць) пераўтворана ў SASS.
Разам з суправаджальнымі Fronttools pack Вы атрымліваеце інструменты для распрацоўкі і пашыраемую пустую тэму на аснове SASS, якую вам трэба, каб пачаць ствараць уласную тэму.
- Калі вы прыязджаеце з Magento 1.9, вы ўжо знаёмыя з SASS
- Magento 2.x, магчыма, можа перайсці ў SASS ў будучыні
- LUMA не прызначаны для пашырэння як пустая тэма
- Уключаны асноўныя інструменты распрацоўкі, такія як browsersync
За некалькі хвілін вы можаце пачаць працу з тэмай SASS і fronttools. Вось крок за крокам тэма кіраўніцтва па ўсталёўцы пустых sass і frontools Magento 2.x кантэйнеры.
Я ўсталёўваю бацькоўскую тэму і fronttools непасрэдна ў кантэйнер php-apache docker Magento 2 з сцэнарам bash:
кучаравы - http://gaiterjones.com/dropbox/magento2/theme-blank-sass/install-theme-blank-sass.sh | Баш
сцэнар для ўстаноўкі theme-blank-sass і fronttools
Вось каманды сцэнарыя, разбітыя на некалькі больш падрабязна:
Усталюйце зменныя асяроддзя ўстаноўкі
cd $ {MAGENTO_DIR} MAGENTO_DIR = '/ var / www / dev / magento2' NVM_HOME = '/ var / www'MAGENTO_DIR - гэта шлях да корня magento, а NVM_HOME - шлях да хатняй тэчкі ўстаноўкі NVM - гэта хатняя тэчка для карыстальніка, які ўсталёўвае NVM
Усталюйце тэму і інструменты з кампазітарам, абнавіць Magento і абнавіць кэш.
Кампазітару патрабуецца snowdog / theme-blank-sassinstall Тэма blank sass Кампазітару патрабуецца snowdog / frontoolsinstall fronttools $ {MAGENTO_DIR} / ўстаноўка bin / magento: upgradeupdate Magento $ {MAGENTO_DIR} / кэш bin / magento: чыстыя абнаўлення кэшаўУсталюйце NVM і gulp-cli
Cd / TMP Curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | экспарт у Bash NVM_DIR = $ {NVM_HOME} /. nvm [-s "$ NVM_DIR / nvm.sh"] && \. "$ NVM_DIR / nvm.sh" nvm ўсталяваць --lts nvm use --lts npm install -g gulp-cliУсталюйце пярэднія панэлі.
cd $ {MAGENTO_DIR} / пастаўшчык / заснежаны / фронт-панэлі npm ўстаноўкіВы запускаеце ўстаноўку fronttools з устаноўкай gulp, і гэта скапіруе ўзоры файлаў канфігурацыі праекта ў $ {MAGENTO_DIR} / dev / tools / frontools / config /. Вы павінны рэдагаваць themes.json для бацькоўскай тэмы.
{"blank": {"src": "vendor / snowdog / theme-blank-sass", "dest": "pub / static / frontend / Snowdog / blank", "locale": ["en_GB"], "postcss ": [" plugins.autoprefixer () "]," ignore ": [" .test "]}}Сцэнар капіруе мае тэмы і файлы браўзэра-сінхранізацыі канфігурацыі праз 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 стыляў здзіўленняДалей я скампіляваць SASS на CSS і ўсталяваць яго з дапамогай
Gulp стыляўНарэшце я выкарыстоўваю n98-magerun2 каб уключыць новую тэму і абнавіць кэш Magento.
THEME_ID = "$ (n98-magerun2.phar dev: theme: list --format = csv \ | grep 'Snowdog / blank' | выразаць -d, -f1)"; test -n "$ {THEME_ID}" \ && n98-magerun2.phar config: усталяваць дызайн / тэму / theme_id "$ {THEME_ID}" $ {MAGENTO_DIR} / кэш bin / magento: clean
Цяпер бацькоўская тэма SASS пустая. Вы можаце паглядзець працэс ўстаноўкі ніжэй.
Мы выкарыстоўвалі задачы ўсталявання gulp і стылі gulp вышэй - у тым ліку іншыя карысныя задачы
- глотка чыстая
- Выдаляе / паб / статычны змест каталога.
- Gulp Dev
- Працуе browserSync і спадчыну, Бавіл, стылі, глядзець задачы.
Для атрымання поўнага спісу задач па gulp або выкарыстоўвайце задачу па змаўчанні гл. На старонцы праекта fronttools.
Звычайная практыка Magento прадугледжвае, што замест рэдагавання іх бацькоў мы распаўсюджваем яе даччынай тэмай. Вы падаўжаеце Snowdog / blank гэтак жа, як любая іншая тэма ,
<theme 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>Я пратэставаў гэта з маёй асяроддзем Docker і выкарыстаў наступны сцэнар для пашырэння пустой тэмы SASS з маёй Gaiterjones / пустой дзіцячай тэмай.
завіток -o- http://gaiterjones.com/dropbox/magento2/theme-blank-sass/child/install-child-theme-blank-sass.sh | Баш
Скрыпт для ўстаноўкі дзіцячай тэмы "blank-sass-sass" #! / bin / bash # GAITERJONES # blog.gaiterjones.com # сцэнар для ўстаноўкі прыклад дзіцячай тэмы-пустыя тэмы # set -e # зменныя RED = '\ 033 [0; 31m 'NC =' \ 033 [0m '# ЗМЯНІЦЬ ГЭТА MAGENTO_DIR =' / var / www / dev / magento2 'NVM_HOME =' / var / www '# start printf "$ {RED} Усталёўка дзіцячай тэмы з пустым нататкам Каранёвая плошча Magento: $ {MAGENTO_DIR} ... \ n \ n $ {NC} "Абслугоўванне n98-magerun2.phar: уключыце cd $ {MAGENTO_DIR} / app / design / curl frontend https://pe.terjon.es/dropbox /magento2/theme-blank-sass/child/gaiterjones-blank-child-theme-blank-sass.tar | tar x $ {MAGENTO_DIR} / ўстаноўка bin / magento: абнаўленне CD $ {MAGENTO_DIR} / пастаўшчык / snowdog / frontools printf "$ {RED} Налада Gaiterjones / пустой тэмы. \ 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: усталяваць дызайн / тэму / theme_id "$ {THEME_ID}" printf "$ {RED} Усталёўка новай канфігурацыі 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} Стварэнне стыляў пустых тэм ... \ n $ {NC}" экспарт NVM_DIR = $ {NVM_HOME} /. nvm [-s "$ NVM_DIR / nvm.sh"] && \. "$ NVM_DIR / nvm.sh" стыкуе стыляў $ {MAGENTO_DIR} / кэш bin / magento: чысты тэхнічнае абслугоўванне n98-magerun2.phar: адключыце # зрабілі printf "$ {RED} Устаноўка завершана. \ N \ n $ {NC}"Сцэнар здабывае зыходныя файлы Gaiterjones / пустыя дзіцячыя тэмы ў app / design / frontend / Gaiterjones / blank і абнаўляе Magento. Мы павінны таксама абнавіць канфігурацыйны файл fronttools themes.json, каб паведаміць fronttools, дзе знаходзіцца наша дзіцячая тэма
{"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 ()"] }}Далей я актывізую тэму з n98-magerun2, а потым мне проста трэба абнавіць кэш і зноў запусціць стылі Gulp, каб стварыць CSS для нашай дзіцячай тэмы.
стыль gulp $ {MAGENTO_DIR} / кэш bin / magento: чыстыFronttools кампілюе і ўсталёўвае CSS для нашай дзіцячай тэмы, якая ўсталяваная і гатовая да прагляду.
Вы можаце ўбачыць тэму пустым SASS у дзеянні на маім сайт распрацоўкі ,