WebHive

Заметки программиста-многостаночника
© 2021 WebHive

Добавляем в БЭМ проект CSS препроцессоры

В статье Добавляем стили в БЭМ проект мы научили БЭМ проект понимать CSS. Но мы живём уже в 21 веке и использовать голый CSS уже как-то стремновато. Есть же SASS и Stylus. Поэтому давайте-ка задействуем всю мощь этих технологий и попробуем подключить их к нашему БЭМ проекту.

Stylus

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

1
$ npm install --save-dev enb-stylus

Как оказалось enb-stylus поддерживает так-же сборку и обычных CSS файлов, что позволяет избавиться от использования enb-css. Ну и конечно-же Stylus сам по себе намного приятнее в работе.

Добавляем в .bem/make.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var techs = {
  ...
  stylus: require('enb-stylus/techs/stylus') // вот тут
},
...
module.exports = function(config) {
  config.nodes('*.bundles/*', function(nodeConfig) {
    nodeConfig.addTechs([
...
      [techs.stylus], // и тут
...
    ]);
...
    // добавляем цель сборки для стилей
    nodeConfig.addTarget('?.css');
  });
};

Сборка проекта с этим модулем прошла без проблем, CSS файлы собрались. К сожалению не смог пока проверить работу со Stylus, но обязательно это сделаю когда займусь ближе блоками.

SCSS

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

1
$ npm install --save-dev enb-sass

Менее популярен, чем enb-stylus, но лично мне как-то ближе к сердцу, но только лишь потому, что опыта работы с SCSS у меня больше.

Добавляем в .bem/make.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var techs = {
  ...
  sass: require('enb-sass') // вот тут
},
...
module.exports = function(config) {
  config.nodes('*.bundles/*', function(nodeConfig) {
    nodeConfig.addTechs([
...
      [techs.sass], // и тут
...
    ]);
...
    // добавляем цель сборки для стилей
    nodeConfig.addTarget('?.css');
  });
};

Однако при попытке запуска сборки проекта получаем:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$ ./node_modules/.bin/enb make
(node) v8::ObjectTemplate::Set() with non-primitive values is deprecated
(node) and will stop working in the next major release.

==== JS stack trace =========================================
...
куча ошибок
...
6:06:20.746 - build started
16:06:20.765 - [rebuild] [desktop.bundles/index/index.bemjson.js] file-provider
16:06:20.797 - [rebuild] [desktop.bundles/index/index.levels] levels
16:06:20.798 - [rebuild] [desktop.bundles/index/index.bemdecl.js] bemjson-to-bemdecl
16:06:20.820 - [rebuild] [desktop.bundles/index/index.deps.js] deps
16:06:20.823 - [rebuild] [desktop.bundles/index/index.files] files
16:06:20.823 - [rebuild] [desktop.bundles/index/index.dirs] files
16:06:20.827 - [failed] [desktop.bundles/index/index.css] enb-sass
16:06:20.827 - build failed
TypeError: vow.promise is not a function

Ошибка такая есть и видимо связано в версией nodejs. По крайней мере нашёл описание проблемы тут https://github.com/enb/enb-sass/issues/13.

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

Итоги и выводы

  • В плане поддержки CSS для БЭМ есть пакеты только для поддержки голого CSS и Stylus (по крайней мере я больше ничего не нашёл)
  • Пакет enb-sass кривой и заброшенный — использовать не рекомендую

PS

Совсем забыл почему-то про Less. А для него как оказалось есть пакет enb-less. Придётся как-нибудь на досуге попробовать, хотя сам я Less никогда не использовал.

Комментарии