Ещё раз про картинки

Форум /

Проблема довольно банальна - ссылка на картинку блока из CSS файла блока не работает. Единственный работающий вариант это:

...
background-image: url(../../common.blocks/header/images/bg-header.png)
...

Фактически это абсолютный путь к блоку, в который так-же входит и путь к папке блоков common.blocks, что на мой взгляд совершенно неверно. Т.е. если я допустим захочу вынести потом этот компонент в допустим папку blog.blocks то получается надо будет бегать и пути менять. Или переименую я блок - та-же история.

Вот такой вариант:

...
background-image: url(images/bg-header.png)
...

работать отказывается

Borschik (через enb - project-stub) чё-то как-то не помог - такой путь он просто проигнорировал. Пытался крутить конфиг .borschik но без особого успеха (но тут я сильно глубоко не рыл).

Итого вопрос - как всё-таки идеологически верно указывать пути к картинкам блока в CSS-файлах блока?

8 years ago

tadatuta

@webhive Правильный вариант — это как раз тот, про который ты пишешь, что он работать отказался.

Но у меня такая же нога, и не болит:

Беру project-stub.
Создаю папку common.blocks/b1/images
Кладу туда картинку common.blocks/b1/images/b1.jpg
Создаю файл common.blocks/b1/b1.css

Пишу в него

.b1 {
    height: 200px;
    background: url(images/b1.jpg);
}

Добавляю b1 в desktop.bundles/index/index.bemjson.js и картинка отображается.

Так что единственный вариант, который могу предложить — опубликуй свой проект на github, попробую разобраться.

8 years ago

webhive

Правильный вариант — это как раз тот, про который ты пишешь, что он работать отказался. Но у меня такая же нога, и не болит:

Вот чорт! Дико извиняюсь тогда за беспокойство - видимо сам где-то накосячил. Буду рыть дальше.

8 years ago

webhive

Короче разобрался в чём тут дело. После прочтения форума по этой теме (пути к картинкам) создалось ощущение, что за разворачивание пути до картинок отвечает borschik. В результате прикрутил его но нифига не помогло. Чортов борщ игнорировал пути и ничего не переписывал.

После ответа от @tadatuta попробовал всё сделать на чистом project-stub-е - всё получилось. Мистика! Попробовал вырезать борщ из project-stub. Ничего не поменялось - всё продолжило работать. Вот это уже интереснее. Ну думаю без вариантов - вся эта магия зашита в stylus. Заменил enb-stylus на enb-css в project-stub - всё равно работает. Да как блин так-то!!! :(

В итоге полез ковырять исходники enb-stylus и enb-css. Внутри обоих обнаружил postcss с плугином postcss-url. Вот блин и вся магия.

В моём тестовом проекте (который не работал) как раз использовался postcss. Добавил туда

plugins : [
  ...
  require('postcss-url')({ url: 'rebase' }),
  ...
]

и всё заработало.

В общем всё больше прихожу к выводу, что postcss заруливает все остальные технологии. Один хрен без него остальные плугины не работают, поэтому не вижу смысла ни в enb-css ни в enb-stylus - оба заменяются одним postcss- ом, к которому кстати можно прикручивать дополнительные парсеры.

Чтобы оставлять комментарии, необходимо авторизоваться.