How to make File Watcher add vendor prefixes in SCSS?

Question

I was watching this SCSS crash course on YouTube where the programmer typed the following:

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  
  #bg {
    clip-path: polygon(0 0, 100% 0, 100% 71%, 51% 100%, 0 100%);
    background-color: map-get($colors, color-blue);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
  }
}

and his CSS output in the tutorial was having this:

body #bg {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 71%, 51% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 71%, 51% 100%, 0 100%);
  ...
}

The person in the tutorial was using Visual Studio Code. But in my case, the vendor prefixes aren't coming because I am using WebStorm and using File Watchers to compile my SCSS code. What do I do so that the File Watchers compile my SCSS code and automatically add the vendor prefixes?

Answer 1

What you are looking for is called autoprefixer. I'm not familiar with WebStorm, but it seems it is possible to implement autoprefixer in WebStorm's pipeline (src.: https://intellij-support.jetbrains.com/hc/en-us/community/posts/360007725180/comments/360001491980).

Also I suggest to spend more time digging into tools, such as gulp, and learning how to compile sass using cli, and not depend on any editor.

Good look.