enb-css

Пакет предоставляет набор ENB-технологий для сборки CSS-файлов в проектах, построенных по методологии БЭМ.

Технологии пакета enb-css:

css — технология собирает исходные CSS-файлы.
css-imports — технология состовляет список @import'ов из исходных CSS-файлов.

Принципы работы технологий и их API описаны в документе API технологий.

Быстрый старт

1. Установите пакет enb-css:

$ npm install --save-dev enb-css

Требования: зависимость от пакета enb версии 0.16.0 или выше.

2. Опишите код стилей в файле с расширением .css:

 blocks/
 └── block/
     └── block.css

3. Добавьте в конфигурационный файл .enb/make.js следующий код:

var CSSTech = require('enb-css/techs/css'),
    FileProvideTech = require('enb/techs/file-provider'),
    bemTechs = require('enb-bem-techs');

module.exports = function(config) {
    config.node('bundle', function(node) {
        // Получаем список файлов (FileList)
        node.addTechs([
            [FileProvideTech, { target: '?.bemdecl.js' }],
            [bemTechs.levels, { levels: ['blocks'] }],
            [bemTechs.deps],
            [bemTechs.files]
        ]);

        // Строим CSS-файл
        node.addTech([CSSTech, {
            // target: '?.css',
            // filesTarget: '?.files',
            // sourceSuffixes: ['.css']
        }]);
        node.addTarget('?.css');
    });
};

Особенности работы пакета

Добавление вендорных префиксов

Технология css поддерживает Autoprefixer.

Для автоматического добавления вендорных префиксов в процессе сборки используйте опцию autoprefixer.

Минимизация CSS-кода

Для минимизации CSS-кода используется csswring.

Включить минимизацию можно с помощью опции compress.

Source Maps

Технология css позволяет строить карты кода (sourcemap) с информацией об исходных файлах.

Включить построение карт кода можно с помощью опции sourcemap.

Дополнительная документация

Сборка отдельного бандла для IE

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы