Статьи / CSS + HTML


WebStorm (PhpStorm) stylus nib install(установка, настройка)

Установка на базе linux, возможно инструкция подойдет для любой операционной системы.

Устанавливаем stylus в домашнюю директорию, чтобы не ставить каждый раз при создании нового проекта:

cd ~/
npm i stylus


Устанавливаем nib:

npm i nib


прим* (можно ставить в директорию проекта, но настройки тогда писать относительно директории проекта)

Настраиваем WebStorm(PhpStorm):
1. Открываем настройки (Ctrl+Alt+S), устанавливаем плагин Stylus support, через меню Plugins,
2. В меню File Watchers жмем + и выбираем Stylus.
3. Настройки(Редактировать = зеленый карандаш, или 2 клик по появившемуся Stylus):

Programm: ~/node_modules/stylus/bin/stylus
Arguments: -u nib $FileName$

Добавляем обязательно -u nib, иначе работать nib не будет, а будет падать с ошибкой

Далее создаем файл ./css/style.styl и в начало файла пишем:
@import 'nib'


При изменении файла style.styl автоматически будут генерироваться правила в ./css/style.css

Вот и всё! :)