створено 3 липня 2017, останнє оновлення 3 липня 2017 року.
З CE 1.9 Magento представив SASS мови таблиць стилів, щоб допомогти розвитку інтерфейсу. З Magento 2.x для Причини, найбільш відомі розробникам вони перейшли з SASS на LESS. Наприкінці дня як LESS, так і SASS компілюються в старий добрий CSS, але якщо ви вибрали мову стилю SASS, або ви новачок у Magento і шукаєте хороший стартовий блок для створення нової теми, тоді варто дивитися на SnowDogApps тема порожній проект sass .
The Менш до проекту спільноти Sass офіційно підтримується Magento і Theme Blank SASS є результатом цього проекту - (готовий до виробництва) Magento 2 пуста тема, перетворена в SASS.
Разом з супроводжуючими Пакет Fronttools Ви отримуєте засоби розробки та розширювану пусту тему, засновану на SASS, для того, щоб ви почали створювати власну власну тему.
- Якщо ви приїжджаєте з Magento 1.9, то ви вже знайомі з SASS
- Magento 2.x може перейти до SASS в майбутньому
- LUMA не призначений для розширення як пуста тема
- Включені основні засоби розробки, такі як браузер
Ви можете працювати з темою пустим SASS і fronttools за кілька хвилин. Ось крок за кроком тема порожній sass і frontools керівництво по установці випробування на моєму Контейнери для докерів Magento 2.x.
Я встановлюю батьківську тему та fronttools безпосередньо в мій контейнер докера Magento 2 php-apache з сценарієм bash:
curl -o- http://gaiterjones.com/dropbox/magento2/theme-blank-sass/install-theme-blank-sass.sh | bash
скрипт для встановлення теми-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 тема порожнього sass composer вимагає snowdog / frontoolsinstall fronttools $ {MAGENTO_DIR} / bin / magento setup: оновлення оновлення Magento $ {MAGENTO_DIR} / bin / magento cache: cleanrefresh cacheВстановіть NVM і gulp-cli
cd / tmp curl - https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash export NVM_DIR = $ {NVM_HOME} /. nvm [-s "$ NVM_DIR / nvm.sh"] && \ t Nvm install - lts nvm використання - lts npm встановити - g gulp - cliВстановіть frontools.
cd $ {MAGENTO_DIR} / постачальник / snowdog / frontools npm installЗапустивши налаштування fronttools з налаштування gulp , це скопіює файли конфігурації зразка проекту в $ {MAGENTO_DIR} / dev / tools / frontools / config /. Ви повинні редагувати themes.json , для батьківської теми.
{"blank": {"src": "постачальник / snowdog / theme-blank-sass", "dest": "pub / static / frontend / snowdog / blank", "locale": ["en_GB"], "postcss ": [" plugins.autoprefixer () "]," ignore ": [" .test "]}}Сценарій копіює мої теми та файли конфігурації json для синхронізації з браузером через 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Далі я компілюю SASS в CSS і встановлюю його за допомогою
ковтка стилівНарешті я використовую n98-magerun2 щоб увімкнути нову тему, і оновити кеш Magento.
THEME_ID = "$ (n98-magerun2.phar dev: тема: список --format = csv | | grep 'Snowdog / blank' | cut-d, -f1)" \ t test & n "$ {THEME_ID}" & & n98-magerun2.phar конфігурація: set design / theme / theme_id "$ {THEME_ID}" $ {MAGENTO_DIR} / bin / magento cache: clean
Тема пуста батьківська тема SASS тепер встановлена. Нижче наведено процес встановлення.
Вище було використано налаштування gulp та gulp стилів - інші корисні завдання включають
- ковтати чистим
- Видаляє / pub / статичний вміст каталогу.
- gulp dev
- Запускається browserSync і спадкування, бабел, стилі, завдання годинника.
Див. Сторінку проекту fronttools для отримання повного списку завдань ковтками або скористайтеся завданням gulp default.
Звичайна передова практика Magento диктує, що замість редагування батьківських програм ми розширюємо її за допомогою дитячої теми. Ви розширюєте Snowdog / blank так само, як будь-яка інша тема .
<тема xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi: noNamespaceSchemaLocation = "urn: magento: framework: Config / etc / theme.xsd"> <назва> Gaiterjones / blank < / title> <parent> Snowdog / blank </parent> <media> <preview_image> media / preview.jpg </preview_image> </media> </theme>Я перевірив це з моїм середовищем Docker і використовував наступний скрипт, щоб розширити тему пустого SASS з моєю темою Gaiterjones / blank child.
curl -o- http://gaiterjones.com/dropbox/magento2/theme-blank-sass/child/install-child-theme-blank-sass.sh | bash
скрипт для встановлення теми тема-blank-sass child #! / bin / bash # GAITERJONES # blog.gaiterjones.com # скрипт для встановлення прикладу тема-blank-sass дитина тема # set -e # змінні RED = '033 [0; 31m 'NC =' 033 [0m '# CHANGE THIS MAGENTO_DIR =' / var / www / dev / magento2 'NVM_HOME =' / var / www '# start printf' $ {RED} Magento Root: $ {MAGENTO_DIR} ... n nn {nc} "n98-magerun2.phar обслуговування: увімкніть 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: оновлення cd $ {MAGENTO_DIR} / постачальника / snowdog / frontools printf "$ {RED} Налаштування Gaiterjones / пуста тема. \ t magerun2.phar dev: тема: список --format = csv | grep 'Gaiterjones / blank' | cut-d, -f1) "\ t test & n "$ {THEME_ID}" & & n98-magerun2.phar конфігурація: set design / theme / theme_id "$ {THEME_ID}" printf "$ {RED} Встановлення нової конфігурації themes.json ... } "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} Створення стилів тему-пустого sass ... n $ {NC}" експортує NVM_DIR = $ {NVM_HOME} /. nvm [-s "$ NVM_DIR / nvm.sh"] && () \ T "$ NVM_DIR / nvm.sh" gulp стилів $ {MAGENTO_DIR} / bin / magento cache: clean n98-magerun2.phar обслуговування: вимкнути # done printf "$ {RED} Установка завершена. \ TСкрипт витягує вихідні файли теки Gaiterjones / blank child до app / design / frontend / Gaiterjones / blank та оновлення Magento. Нам потрібно також оновити конфігураційний файл fronttools themes.json, щоб дозволити fronttools знати, де живе дитина
{"blank": {"src": "постачальник / snowdog / theme-blank-sass", "dest": "pub / static / frontend / snowdog / blank", "locale": ": [" plugins.autoprefixer () "]," ignore ": [" .test "]}," gaiterjones-blank ": : "pub / static / frontend / Gaiterjones / blank", "locale": ["en_GB"], "localeOverwrites": true, "parent": "blank", "postcss": ["plugins.autoprefixer ()"] }}Далі я активую тему за допомогою n98-magerun2, і тоді мені просто потрібно оновити кеш-пам'ять і запустити gulp-стилі, щоб створити CSS для нашої дочірньої теми.
gulp стилів $ {MAGENTO_DIR} / bin / magento cache: cleanFronttools компілює і встановлює CSS для нашої дочірньої теми, яка тепер встановлена і готова до перегляду.
Ви можете побачити тему пустого SASS в дії на моєму Розробка сайту .