ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer

Как взаимодействуют стили и скрипты в BEMjson?

Очень давно пишу боевые проекты на БЭМ-нейминге. Недавно посоветовали начать использовать БЭМ в полном стэке с шаблонизатором bemjson и enb. Курю мануалы яндекса и вроде бы ясно, только вот один момент я упускаю.
Правильно ли я понял логику?
Есть desktop.bundles. Там хранятся шаблоны страниц в json формате.
Есть desktop.blocks. Там хранятся блоки и их элементы. Точнее их javascript и css.

Я создал страницу, написал самую простую разметку хедера. В desktop.blocks создал header, положил туда header.styl.
В странице подключил header.css, который по идее должен упасть мне в desktop.bundles. Но почему-то не компилируется и не падает. Хотя в .enb/make.js конфигурация enb-stylus точно верная. Ошибок в консоли нет. Кроме того, enb говорит:
17:16:18.369 - build finished - 121ms
----- /desktop.bundles/page/page.html 134ms
17:16:18.426 - build started
17:16:18.435 - build finished - 12ms
----- /desktop.bundles/page/header.css 12ms

Вот только /desktop.bundles/page/header.css в результате нет. Он не создаётся. В консоли браузера ошибка /desktop.bundles/page/header.css 404 not found.

Помогите разобраться - как правильно подключать в bemjson стили и скрипты к странице?
  • Вопрос задан
  • 190 просмотров
Решения вопроса 2
werty1001
@werty1001
undefined
Я думаю вам тут быстрее ответят, БЭМ многие используют, а вот полный стек уже гораздо меньше.
Ответ написан
Комментировать
@ilyarsoftware
Если рассматривать сборку настроенную в bem/project-stub то все начинается с desktop.bundles/project/project.bemjson.js:

  • упомянутые блоки в project.bemjson.js формируют декларацию project.bemdecl.js;
  • по декларации project.bemdecl.js вычисляются зависимости project.deps.js;
  • используя знания о зависимостях собираются цели project.js и project.css.
uXNvQ2lOOEgTRcojbeobCz4NWVg.svg

Подробности: Технология для описания зависимостей и Сборка БЭМ-проекта.

Рекомендую пройти по шагам статьи: Создаем свой проект на БЭМ в процессе может быть полезен рабочий пример проекта ilyar/start-with-project-stub, коммиты организованы по главам статьи.

После прохождения стать должно стать понятнее, а по вопросам которые статья не раскрывает полностью обязательно можно найти материал подробного описания.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы