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

SASS CSS

猴子

2020-03-23

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

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

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

萨斯

YUI Compressor CSS

提前致谢。

第2601篇《如何在PHPStorm IDE中使用SCSS File Watcher缩小CSS》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
Green凯 2020.03.23

实现此目标的最快方法可能是使用前面的注释中提到的压缩选项作为参数。在PHPStorm中进行配置的最快方法如下:

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

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

PHPStorm中的压缩SCSS设置

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

卡卡西樱 2020.03.23

如果在Linux(Arch)下使用sassc,则可以用作Arguments:

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android