Всем доброго времени суток. Пробую разбираться в строительстве готовых, сверстанных страниц, при помощи bem-tools. И привлек внимание небольшой нюанс в следующем блоке:
block : 'select',
mods : { mode : 'radio', theme : 'islands', size : 'l' },
name : 'select1',
val : 2,
options : [
{ val : 1, text : 'Раз' },
{ val : 2, text : 'Два' },
{ val : 3, text : 'Три' }
]
...
Вот такой html получается:
<div class="select select_mode_radio select_theme_islands select_size_l i-bem select_js_inited" data-bem="{"select":{"name":"select1"}}">
<input class="select__control" name="select1" value="2" type="hidden">
<button class="button button_size_l button_theme_islands button__control select__button i-bem button_js_inited _popup-destructor_js_inited" data-bem="{"button":{}}" role="button" type="button">
<span class="button__text">Два</span>
<i class="icon select__tick" aria-hidden="true"></i>
</button>
</div>
Далее смотрю на стили элемента
.select_theme_islands .select__tick {
background-image: url('../../libs/bem-components/design/common.blocks/theme/_islands/arrow.svg');
...
}
А перенесенная страница в другой каталог этот svg уже не нашла конечно.
Но это ведь в уже собранных файлах o_O .bem/make.js
process.env.YENV = 'production';
На этой странице использовался только один компонент, но если их несколько... В ручную копировать элементы компонентов, переписывать их url в стилях и т.п. Или есть какие-то проф хитрости которые предстоит изучить?
Хочется получить готовый index.html, _index.js, _index.css и отправить их дальше по конвейеру, отдельно от node-js и bem-tools. Помогите пожалуйста независимо подгрузить "пимпочка.svg" в select bem-core после сборки.
Так же, косвенно есть второй вопрос, возможно его суть как-то повлияла на предыдущий результат. Каталог проекта я собирал с помощью утилиты yo bem-stub. Все движения при сборки повторял за Женей Константиновым, из видео по BEMup в Москве. Но след в след не вышло т.к. yo bem-stub предлагал небольшой список компонентов. bem-components я выбрал, но к примеру bem-core не было среди вариантов далее. И стреди технологий было совсем небольшое колличество, нежели в видео. Если точнее то это все технологии что предлагаются:
? Choose technologies to be used in the project:
◯ BEMJSON
◯ ie.css
◯ ie8.css
◯ ie9.css
❯◯ BEMTREE
◯ node.js
◯ browser.js+bemhtml
а как же ie6? )) Или другие.
Ответ на первый вопрос кроется в использовании borschik. Если совсем коротко, то необходимо положить в корень проекта файл
.borschik
(начинается с точки) с описанием, как рерайтить пути к статике или же можно вообще инлайнить картинки прямо в CSS, чтобы избежать лишних http-запросов. Предлагаю вот такой вариант:Что касается второго вопроса, то с момента BEMup'а генератор был доработан. В частности при выборе
bem-components
нет необходимости спрашивать проbem-core
, т.к.bem-components
автоматически вытянут нужную версиюbem-core
по зависимостям в любом случае. Список технологий, если мне не изменяет память, можно прокручивать (подbrowser.js+bemhtml
должны быть еще какие-то). Но ie6 там, конечно, нет ;)@tadatuta, спасибо! Шикарное решение.
Я так и предположил, что генератор доработался и варианты немного поменялись. Да и прокручивать я пытался, разными вариантами PageDown, СтрелкаВНиз... больше нету.
А вот в BamUp-e есть ie6, ie7, ie8. Ну да ладно, обойдусь как ни будь =D
@Bumerang47 Все течет, все меняется ;-) Даешь ренессанс 2.0, пятилетку за 3 года ;-)
@tadatuta, прошу прощения, но не получается. Вероятно это был пример и для моего случая его необходимо как-то настроить? Создал файл, скопировал ваш вариант. В сборке base64 нет =(
Судя по расшареному проекту, ты как минимум имя файла неверное задал.
.borschik
и не указал в конфиге каталог img.Ааа, чёрт возьми, прошу прощения. Переименовал, все стало хорошо. А я пару дней в раздумьях, почему не работает.