如何在 PHPStorm IDE 中使用 SCSS File Watcher 缩小 CSS答案

【问题标题】：How to Minify CSS with SCSS File Watcher in PHPStorm IDE如何在 PHPStorm IDE 中使用 SCSS File Watcher 缩小 CSS
【发布时间】：2013-07-31 23:38:59
【问题描述】：

有没有办法配置 SASS FileWatcher 以构建 Minified CSS？

我目前配置了 SASS + YUI Compressor 来完成此任务，但如果可能的话，我想使用纯 SASS 来完成此任务。

以下是两种配置的截图：

SASS

YUI Compressor CSS

提前致谢。

【问题讨论】：

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

标签： sass minify phpstorm yui-compressor

【解决方案1】：

实现这一点的最快方法可能是使用前面 cmets 中提到的压缩选项作为参数。在 PHPStorm 中配置它的最快方法如下：

转到File > Settings
在Project Settings 内选择File Watchers
您应该已经在此处创建了一个 SCSS 观察程序（如果您启用了 SCSS 观察插件，PHPStorm 会在打开新的 .scss 文件时提示您创建一个观察程序。）否则，启用它（有关此部分的更多信息official documentation,) 然后按“+”号创建新的观察者。
双击观察者名称以访问其配置。
在Arguments 行中确保添加--style compressed 参数
点击确定就完成了

此图片显示了该配置的外观：

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

【讨论】：

这里是完整的参数：--no-cache --style compressed --update $FileName$:$FileNameWithoutExtension$.min.css
旧但仍然有效。我必须将参数放在 $FileName$ 之前才能正常工作。（我在查之前试过了）

【解决方案2】：

The correct answer is --style=compressed

菜单文件 -> 设置 -> 工具 - 文件观察器添加 scss 并在参数中添加 --style=compressed

【讨论】：

【解决方案3】：

如果你在 Linux (Arch) 下使用 sassc，你可以使用 as Arguments：

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

【讨论】：

【解决方案4】：

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

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

喜欢这里：

如果您想了解这篇文章的更多详细信息，我在下面的帖子中找到了这个解决方案：https://stackoverflow.com/a/25579991/9861577。

【讨论】：