WebHive

Наш проект из статьи Создаём минимальный проект на БЭМ c нуля умеет генерировать только HTML. Теперь настало время добавить генерацию CSS файлов.

Ставим пакет enb-технологий для для сборки CSS-файлов enb-css

$ npm install --save-dev enb-css

Пакет имеет исчерпывающую документацию, поэтому подробно на опциях останавливаться не буду.

Просто добавим его в .bem/make.js

var techs = {
        fileProvider: require('enb/techs/file-provider'),
        bemhtml: require('enb-bemxjst/techs/bemhtml'),
        bemjsonToHtml: require('enb-bemxjst/techs/bemjson-to-html'),
        css: require('enb-css/techs/css'), // <= стили объединяются в один файл
        cssImport: require('enb-css/techs/css-imports') // <= стили инклюдятся в общий файл
    },
...
module.exports = function(config) {
    config.nodes('*.bundles/*', function(nodeConfig) {
        nodeConfig.addTechs([
...
            /**
             * добавляем сюда или css или cssImport
             * технологии взаимоисключающие, поэтому одновременно их использовать не получится
             */
            [techs.css],
            // [techs.cssImport],
...
        ]);
...
        // добавляем цель сборки для стилей
        nodeConfig.addTarget('?.css');
...
    });
};

Так же подключим наш файл в bemjson

module.exports = {
    block : 'page',
    title: 'Page title',
    head : [
        { elem : 'css', url : 'index.css' } // <= вот тут
    ],
...
};

После сборки бандла получим сгенерированный файл index.css в котором будут стили использованных компонентов либо в виде инклюдов, любо прямо заинлайненными.

Компоненты из пакета bem-components теперь выглядят оформленными в соответствии со стилями поставляемыми вместе с ними в комплекте.