Если вы предпочитаете использовать при разработке stylus или less, которые по умолчанию не поддерживаются в @bitrix/cli , то можно легко добавить такую поддержку.
Речь идет об инструменте из оф. документации https://dev.1c-bitrix.ru/learning/course/index.php?COURSE_ID=105&LESSON_ID=12435&LESSON_PATH=9209.4776.3635.12435
Предполагаю что у вас уже установлен Node.js и npm. Примеры команд при разработке в Linux.
Установка @bitrix/cli
Библиотеку установим глобально, чтобы можно было использовать в разных проектах.
npm install -g @bitrix/cli
Создание расширения
Предположим что мы создаем расширение, которое будет храниться в директории /local/js/ и будет называться extension. Переходим в директорию и создаем решение
cd /home/bitrix/www/local/js
bitrix create extention
cd extention/
Посмотрим где мы находимся
pwd
# /home/bitrix/www/local/js/extention
Посмотрим список файлов в директории
ls -h
# bundle.config.js config.php dist lang src
Поддержка Stylus и Less
Находим где распологаются исходники бинарника bitrix
whereis bitrix
#bitrix: /home/bitrix/.nvm/versions/node/v14.18.3/bin/bitrix
Переходим в директорию и устанавливаем все пакеты для пересборки бинарника, а также пакеты stylus и less
cd /home/bitrix/.nvm/versions/node/v14.18.3/
cd lib/node_modules/@bitrix/cli/
pwd
# /home/bitrix/.nvm/versions/node/v14.18.3/lib/node_modules/@bitrix/cli
npm install
npm install stylus
npm install less
После успешной установки, находясь в той же директории, включаем отслеживание файлов *.styl и *.less, для этого редактируем файл src/tools/watch.js. Находим соответствующий кусов кода и дополняем его
function createPattern(directories) {
return directories.reduce((acc, dir) => {
const directory = new Directory(dir);
const directoryConfigs = directory.getConfigs();
directoryConfigs.forEach((currentConfig) => {
acc.push(slash(path.resolve(currentConfig.context, '**/*.js')));
acc.push(slash(path.resolve(currentConfig.context, '**/*.css')));
acc.push(slash(path.resolve(currentConfig.context, '**/*.scss')));
// добавляем эти 2 строки ниже
acc.push(slash(path.resolve(currentConfig.context, '**/*.styl')));
acc.push(slash(path.resolve(currentConfig.context, '**/*.less')));
});
return acc;
}, []);
}
Также правим файл src/utils/is-allowed.js
switch (ext) {
case '.js':
case '.jsx':
case '.css':
case '.scss':
// добавляем эти 2 строки ниже
case '.styl':
case '.less':
return true;
default:
return false;
}
Теперь пересобираем, находясь в той же папке
pwd
# /home/bitrix/.nvm/versions/node/v14.18.3/lib/node_modules/@bitrix/cli
npm run build
После сборки можно запускать сборку расширения с отслеживанием изменений в директории с расширением
pwd
# /home/bitrix/www/local/js/extention
bitrix build -w
Далее можно подключать stylus файлы
