如何使用PHPStorm IDE中的SCSS文件观察器来缩小CSS

时间:2013-07-31 23:38:59

标签: sass minify phpstorm yui-compressor

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

我目前配置了SASS + YUI Compressor来实现这一目标,但如果可能的话,我想用纯SASS做到这一点。

以下是两种配置的屏幕截图:

SASS

YUI Compressor CSS

提前致谢。

4 个答案:

答案 0 :(得分:57)

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

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

此图显示了该配置的外观:

Compressed SCSS settings in PHPStorm

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

答案 1 :(得分:0)

如果您在Linux(Arch)下使用 sassc ,则可以将其用作参数:

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

答案 2 :(得分:0)

The correct answer is --style=compressed

菜单文件->设置->工具-文件监视程序 添加scss并在参数中添加--style = compressed

enter image description here

答案 3 :(得分:0)

对我来说,--style compressed--style compressed--style=compressed 不起作用。

我不得不添加选项 -x 作为参数。

像这里: enter image description here

如果您想了解这篇文章的更多详细信息,我在以下文章中找到了此解决方案:https://stackoverflow.com/a/25579991/9861577