Как пользоваться препроцессорами, отличными от SCSS и SASS?

Question

[kq1995]

Подскажите пожалуйста как пользоваться препроцессором, отличным от SASS или SCSS? С этими двумя легко т.к. есть GUI app для винды, которая автоматом будет компилировать все, где все понятно и т.д.

Но если я хочу использовать PostCSS, то так не получится. Нужны (как по мне) длинные танцы с бубном.
Можете обьяснить как это можно сделать "по-простому"?

Пользуюсь Вебштормом, но при создании файлов .pcss они не компилируются, хотя плагин установлен.

Comments

[Алекс Глебов]

https://webdesign-master.ru/blog/tools/gulp-4-less...
https://www.npmjs.com/package/gulp-postcss

Answer 1

[hellcaster]

GUI для новичков (сам когда-то использовал Koala). Все true программисты используют CLI. Сегодня лучше всего настроить Gulp или WebPack для сборки проекта, которые сразу скомпилируют код предпроцессоров на чистый CSS.
В них много плюсов:

• Кастомизация
  
• Управления с командной строки (не нужно переключиться между окнами, а сразу в WebStorm запустил и можешь смотреть весь log)
  
• Легкость (не потребляет много ресурсов ПК)
  

Эти инструменты не только компилируют PostCSS, а и могут оптимизировать картинки, HTML, CSS, JS, собрать все в один файл, вставлять svg в html и много другого.

Answer 2

[Сергей delphinpro]

Какие танцы с бубном?

1. Поставить на машину nodejs
   
2. Написать gulpfile.js
   
3. Установить пакеты
   
4. Начать пользоваться.
   

Самое сложное здесь (но не сложное в целом) — это написать gulpfile.

Пример задачи для компиляции sass

import gulp from 'gulp';
import gulpSass from 'gulp-sass';

export const sass = function(){
  return gulp.src('./src/sass/*.scss')
    .pipe(gulpSass())
    .pipe(gulp.dest('./dis/css/'));
}

Запускаем
npm run sass
И получаем скомпилированный файл.