Awesome
enb-css
Пакет предоставляет набор ENB-технологий для сборки CSS-файлов в проектах, построенных по методологии БЭМ.
Технологии пакета enb-css
:
- css — технология собирает исходные CSS-файлы.
- css-imports — технология состовляет список
@import
'ов из исходных CSS-файлов.
Принципы работы технологий и их API описаны в документе API технологий.
Обзор документа
<!-- TOC --> <!-- TOC END -->Быстрый старт
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.
Дополнительная документация
Лицензия
© 2015 YANDEX LLC. Код лицензирован Mozilla Public License 2.0.