如何在PHPStorm IDE中使用SCSS File Watcher缩小CSS [英] How to Minify CSS with SCSS File Watcher in PHPStorm IDE

问题描述

有没有一种方法可以配置SASS FileWatcher，以便构建Minified CSS?

Is there a way to configure SASS FileWatcher so it builds a Minified CSS?

我目前已配置SASS + YUI Compressor来完成此操作，但如果可能的话，我想使用纯SASS进行此操作.

I currently configured SASS + YUI Compressor to accomplish this but I would like to do this with pure SASS if possible.

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

Here are the screenshots of both configurations:

SASS

YUI Compressor CSS

谢谢.

推荐答案

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

Probably the fastest way to achieve this is to use the compressed option, mentioned in the previous comments, as an argument. The quickest way to configure this in PHPStorm is as follows:

• 转到File > Settings
• 在Project Settings内部，选择File Watchers
• 您应该已经在此处创建了SCSS监视程序(如果启用了SCSS监视插件，则PHPStorm会在打开新的.scss文件时提示您创建监视程序.)否则，请启用它(有关此部分的更多信息，请参阅本节). 官方文档， )，然后按"+"号创建新的观察者.
• 双击观察者名称以访问其配置.
• 在Arguments行中，确保添加--style compressed自变量
• 单击确定"，您就完成了

• Go to File > Settings
• Inside Project Settings select File Watchers
• You should already have an SCSS watcher created here (if you have the SCSS watch plugin enabled, PHPStorm prompts you to create a watcher when opening a new .scss file.) Otherwise, enable it (more info about that in this section of the official documentation,) and then create the new watcher pressing the "+" symbol.
• Double click the watcher name to access its configuration.
• In the Arguments line make sure to add the --style compressed argument
• Click OK and you're done

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

This image shows how that configuration should look:

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

From that point on, your .css output files will be compressed.

这篇关于如何在PHPStorm IDE中使用SCSS File Watcher缩小CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！