39

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

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

Thanks in advance.

Improve this question
2
  • 6
    Did you checked command line arguments? SASS compiler (scss.bat) supports --style compressed option, which will produce very compact/compressed output -- sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style . If you wish -- you can then process it again with YUICompressor (to possibly obtain few more optimisations). Alternatively create a .BAT/.CMD file that would compile sass code first and then run it trough YUIC (2 lines in total) and use it in your File Watcher instead of actual SASS compiler. Commented Aug 1, 2013 at 0:36
  • @LazyOne That should be an answer. :) Commented Aug 1, 2013 at 16:18

4 Answers 4

Reset to default
84

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:

  • 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:

Compressed SCSS settings in PHPStorm

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

here is the full Arguments: --no-cache --style compressed --update $FileName$:$FileNameWithoutExtension$.min.css
Old but still valid. I had to put the arguments before the $FileName$ for it to work. (I tried it after before looking it up)
5 
The correct answer is --style=compressed

menu File -> Settings -> Tools - File watchers add scss and in argument add --style=compressed

enter image description here

Improve this answer

Comments

0

If you are using sassc under Linux (Arch) you could use as Arguments:

-t compressed -m auto $FileNameWithoutExtension$.scss $FileNameWithoutExtension$.min.css
Improve this answer

Comments

0

For me, --style compressed, --style compressed and --style=compressed don't work.

I had to add the option -x as an argument.

Like here: enter image description here

If you want more details this post the following post is where I found this solution: https://stackoverflow.com/a/25579991/9861577.

Improve this answer

1 Comment

That's because you are using LESS and this is about SCSS

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.