[css] sass --watch with automatic minify?

Is there a way to run:

sass --watch a.scss:a.css

but have a.css end up being minified?

How would I avoid having to run a separate minification step as I compile my stylesheet?

This question is related to css sass minify

The answer is


If you are using JetBrains editors like IntelliJ IDEA, PhpStorm, WebStorm etc. Use the following settings in Settings > File Watchers. enter image description here

  1. Convert style.scss to style.css set the arguments

    --no-cache --update $FileName$:$FileNameWithoutExtension$.css
    

    and output paths to refresh

    $FileNameWithoutExtension$.css
    
  2. Convert style.scss to compressed style.min.css set the arguments

    --no-cache --update $FileName$:$FileNameWithoutExtension$.min.css --style compressed
    

    and output paths to refresh

    $FileNameWithoutExtension$.min.css
    

If you're using compass:

compass watch --output-style compressed

There are some different way to do that

sass --watch --style=compressed main.scss main.css

or

sass --watch a.scss:a.css --style compressed

or

By Using visual studio code extension live sass compiler

see more


Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to sass

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0 How to fix ReferenceError: primordials is not defined in node Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist` What is the difference between CSS and SCSS? Angular-cli from css to scss Why don’t my SVG images scale using the CSS "width" property? Angular CLI SASS options Error: Cannot find module 'gulp-sass' How to compile or convert sass / scss to css with node-sass (no Ruby)? Try reinstalling `node-sass` on node 0.12?

Examples related to minify

Excluding files/directories from Gulp task How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x) Uncaught TypeError: undefined is not a function on loading jquery-min.js sass --watch with automatic minify? How to minify php page html output? Is there a good JavaScript minifier? What's the difference between jquery.js and jquery.min.js? Tool to Unminify / Decompress JavaScript