Magento 2 тема порожній SASS батьківських і дочірні установки і установки

створено 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

#! / bin / bash # GAITERJONES # blog.gaiterjones.com # скрипт для встановлення теми-blank-sass та fronttools # для служби докера https://github.com/gaiterjones/docker-magento2 # set -e # змінні RED = 033 [0; 31m 'NC =' 033 [0m '# ЗМІНИТЬ ЦЕ MAGENTO_DIR =' / var / www / dev / magento2 'NVM_HOME =' / var / www '# start printf "$ {RED} Встановлення теми- n $ {NC} "cd $ {MAGENTO_DIR} композитор вимагає snowdog / theme-blank-sass композитор вимагає snowdog / frontools $ {MAGENTO_DIR} / bin / magento setup: оновіть $ {MAGENTO_DIR} / bin / magento cache: clean printf "$ {RED} Встановлює nvm ... \ _ n $ {NC}" 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_DIR / nvm.sh" nvm install - lts nvm використання - lts printf "$ {RED} Встановлення ковтка ... n $ {NC}" npm install -g gulp-cli printf "$ {RED} Встановлення n $ {NC} "cd $ {MAGENTO_DIR} / постачальник / snowdog / frontools npm встановити curl налаштування gulp -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 curl -o "$ {MAGENTO_DIR} /vendor/snowdog/theme-blank-sass/web/images/logo.svg" http: // gaiterjones .com / dropbox / magento2 / theme-blank-sass / Логотип-тема-blank-sass.svg printf "$ {RED} Створення стилів тему-пустого sass ... n $ {NC}" стилів gulp printf "$ {RED} Налаштування Snowdog / пустої теми n $ {NC} "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 # done printf "$ {RED} Установка n $ {NC} "

Нижче наведено кілька команд скрипту, деталізованих нижче:

Встановіть змінні середовища встановлення

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: clean

Fronttools компілює і встановлює CSS для нашої дочірньої теми, яка тепер встановлена ​​і готова до перегляду.

Ви можете побачити тему пустого SASS в дії на моєму Розробка сайту .