如何让 File Watcher 在 SCSS 中添加供应商前缀？答案

【问题标题】：How to make File Watcher add vendor prefixes in SCSS?如何让 File Watcher 在 SCSS 中添加供应商前缀？
【发布时间】：2020-11-16 12:32:05
【问题描述】：

我在 YouTube 上观看了这个 SCSS 速成课程，程序员输入了以下内容：

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;
  }
}

他在教程中的 CSS 输出是这样的：

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%);
  ...
}

教程中的人正在使用 Visual Studio Code。但在我的情况下，供应商前缀没有出现，因为我正在使用 WebStorm 并使用 File Watchers 来编译我的 SCSS 代码。我该怎么做才能让 File Watchers 编译我的 SCSS 代码并自动添加 供应商前缀？

【问题讨论】：

标签： sass webstorm jetbrains-ide vendor-prefix

【解决方案1】：

您正在寻找的是所谓的自动前缀。我不熟悉 WebStorm，但似乎可以在 WebStorm 的管道中实现 autoprefixer (src.: https://intellij-support.jetbrains.com/hc/en-us/community/posts/360007725180/comments/360001491980)。

另外我建议多花点时间研究工具，比如 gulp，学习如何使用 cli 编译 sass，不要依赖任何编辑器。

好看。

【讨论】：