如何在PHPStorm IDE中使用SCSS文件观察器压缩CSS

Question

有没有一种方法可以配置SASS FileWatcher以构建一个压缩的CSS文件？

我目前使用了SASS + YUI Compressor来实现这个目标，但是如果可能的话，我想使用纯的SASS完成。

以下是两个配置的截图:

SASS

YUI Compressor CSS

提前感谢。

- achucuan

---

你是否检查过命令行参数？SASS编译器（scss.bat）支持--style compressed选项，它将产生非常紧凑/压缩的输出 -- http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style 。如果你愿意，可以再用YUICompressor处理一次（可能会获得更多优化）。或者创建一个.BAT/.CMD文件，首先编译sass代码，然后通过YUIC运行它（总共2行），并在你的文件监视器中使用它来代替实际的SASS编译器。 - LazyOne

@LazyOne 那应该就是一个答案了。 :) - KatieK

Answer 1

可能最快的方法是使用压缩选项作为参数，如前面的评论所提到的。在PHPStorm中进行配置的最快方式如下：

• 转到 文件 > 设置
• 在 项目设置 中选择 文件监视器
• 您应该已经在此处创建了一个SCSS监视器（如果启用了SCSS watch插件，PHPStorm在打开新的 .scss 文件时会提示您创建监视器）。否则，请启用它（有关更多信息，请参见官方文档的这一部分）, 然后按 "+" 符号创建新的监视器。
• 双击监视器名称以访问其配置。
• 在 Arguments 行中确保添加 --style compressed 参数
• 单击“确定”，完成操作

以下图像显示了配置的样子：

从那时起，您的 .css 输出文件将被压缩。

- E. Serrano

---

完整的参数为：--no-cache --style compressed --update $FileName$:$FileNameWithoutExtension$.min.css。翻译为：不使用缓存，压缩样式，并更新文件名为 $FileName$ 的 CSS 文件为 $FileNameWithoutExtension$.min.css。 - achucuan

老但仍然有效。我必须在$FileName$之前放置参数才能使其工作。（在查找之前尝试过） - Wolle

Answer 2

The correct answer is --style=compressed

菜单 文件 -> 设置 -> 工具 -> 文件监视器

添加 SCSS 并在参数中添加 --style=compressed。

- Farzad.Kamali

Answer 3

如果您正在Linux（Arch）下使用sassc，您可以使用以下参数：

-t compressed -m auto $FileNameWithoutExtension$.scss $FileNameWithoutExtension$.min.css

- SYS64738

Answer 4

对我来说，--style compressed，--style compressed和--style=compressed都不起作用。

我必须将选项-x添加为参数。

就像这样：

如果您想要更多细节，请查看以下帖子，这是我找到此解决方案的地方：https://dev59.com/Yl8e5IYBdhLWcg3wlbTx#25579991。

- Rudra

---

这是因为你正在使用LESS，而这是关于SCSS的。 - Mladen Janjetovic