How to use preprocessors other than SCSS and SASS?

Question

Web development

Can you please tell me how to use a preprocessor other than SASS or SCSS? With these two, it's easy. there is a GUI app for Windows, which will automatically compile everything, where everything is clear, etc.

But if I want to use PostCSS, then it won't work. We need (as for me) long dances with a tambourine.
Can you explain how it can be done "easily"?

I use Webstorm, but when creating .pcss files, they are not compiled, although the plugin is installed.

Answer 1

GUI for beginners (I myself once used Koala). All true programmers use the CLI. Today, it's best to set up Gulp or WebPack to build the project, which will immediately compile the preprocessor code to pure CSS.
They have many advantages:

• Customization
  
• Management from the command line (no need to switch between windows, but immediately launched in WebStorm and you can watch the entire log)
  
• Lightweight (does not consume a lot of PC resources)
  

These tools not only compile PostCSS, they can optimize images, HTML, CSS, JS, compile everything into one file, embed svg into html, and much more.

Answer 2

What dances with a tambourine?

1. Install nodejs on machine
   
2. Write gulpfile.js
   
3. Install packages
   
4. Start using.
   

The hardest part here (but not hard in general) is writing the gulpfile.
Sample task for compiling 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/'));
}

Run
npm run sass
And get the compiled file.