Здравсвтуйте. Решил использовать bem совместно с webpack. Но возникла следующая проблема, может подскажете, как решить?: у каждого блока может быть много css тем, то есть имею вот такую структуру:
components/
menu/
menu.js
themes/
default/
menu.scss
dark/
menu.scss
light/
menu.scss
css тема должна подгружаться динамически, то есть что-то вроде: содержимое menu.js файла:
require('./themes/' + currentTheme + '/menu.scss');
Но при таком подходе в webpack-е в бандл будут собраны все файлы всех css тем. Можно, конечно, использовать
require.ensure([], function() {
require('./themes/' + currentTheme + '/menu.scss');
});
и тогда scss файл каждой темы будет помещен в отдельный бандл и будет подгружаться динамически. Но и в этом случае возникает проблема. Т.к. require.ensure выполняется асинхронно, то модуль menu.js отработает и разрезолвится и параллельно пойдет запрос за стилями блока, но сам блок и его верстка уже будут в DOM-е и пользователь увидит "голый" html, затем подгрузятся стили блока и верстка блока будет стилизована. Как это обойти? То есть как сделать, чтобы модуль menu.js не разрезолвился до тех пор, пока не резовленятся его зависимость, а именно css файл темы? Спасибо.
У нас только что закончился двухдневный хакатон по инструментам, где команда @just-boris написали рабочий прототип сборки БЭМ-проекта на webpack. В процессе у них получился вот такой набор полезных инструментов: https://github.com/bempack
Тут еще предстоит немало причесать и оптимизировать, но тем не менее.
БЭМ как таковой здесь никак не поможет. Webpack построен по принципу "одним entry point - один bundle". Нужно создать несколько сборок webpack (или одну, но запускать 3 раза с разным параметром theme) и используйте опцию alias, чтобы смаппиться на стили конкретной темы. Еще можно поискать в интернете, "css themes with webpack", беглый поиск нашел мне https://github.com/gmac/sass-theme-template-loader/
В том-то и дело, что уже искал, гуглил месяц, расспрашивал разработчиков вебпака(по сути ответили, что никак нельзя сделать то, что описал в первом сообщение), все облазил, все лоадеры пересмотрел стандартные и пользовательские, тоже и с плагинами вебпака - результата ноль. Мысль про генерацию нескольких сборок для каждой темы была, но т.к. тем может быть 100, плюс у каждой темы есть ltr, rtl версия, это уже 200 сборок, а если ещё учесть, что сайт будет мультиязычный, например, 10 языков, итого 10 * 200 = 2000 сборок! Сума сойти. Поэтому эту мысль сразу отбросил и начал искать решение, но, черт побери(простите, наболело), не нахожу решения... Разумеется с количеством тем и языков я утрировал, но сам факт, что придется генерировать кучу сборок кажется извращенным.. Решение придумал, основываясь на промисах, но выглядит это не как решение, а как костыль и даже противно юзать такой костыль. Все же, видимо, придется генерировать кучу сборок. Спасибо за помощь и извините за крик души, так по-началу был рад вебпаку, а сейчас расстроился...
Ваш случай отличается от стандартного, поэтому это нормально, что популярные иструменты его не решают. Может вам стоит написать свой инструмент или плагин к webpack. За образец лучше взять плагин для локализации потому что ваша задача очень похожа на сборку разных языков (в вашем случае тем).
Может еще @tadatuta что-нибудь может рассказать о том, как устроена сборка тем simple и islands в bem-components
Отличается от стандартного? В bem-components и в целом же может быть много css тем. Или вы имеете ввиду отличается тем, что обычно все стили всех компонентов собираются в один css файл для каждой темы, а у меня не так? Видимо, мне стоит посмотреть для начала, как же сборка настроена в вашем новом seed-е для вебпака. И плагин для локализации, к сожалению, судя по всему, генерирует отдельную сборку для каждого языка. Спасибо большое за помощь!