SASS Output Style automate with minified file

Question

I'm trying to do test to use correctly SASS and I want create a file style.css and that file minify to style.min.css

sass --watch sass/style:css --style compressed

That works well but I need automate proccess doing compile & minify at the same time.

I've found this code in other stackoverflow:

sass --watch sass/style.scss:css/style.css --watch css/style.css:css/style.min.css --style compressed --scss

but now dont work how I want that works. Also at Sass webpage the code is different now on 2020.

https://sass-lang.com/documentation/cli/dart-sass#style

I'm not use gulp tool because I think it not neccesary for Wordpress projects.

Anybody may help me?

Answer 1

Irrespective of what you're building your site in, if you want total control over compilation/minification/whatever then well, that's what tooling such as gulp is there for.

It looks like you were trying to compile SCSS to CSS to a file, then take that compiled CSS file and minify it. That CLI tool won't do that, but it can absolutely do the compilation/compression at the same time, directly from the source SCSS.

Using the binary you're using, this is going to compile and compress, taking ./sass/style.scss and outputting the result to ./css/style.min.css

sass sass/style.scss:css/style.min.css --style compressed

Add --watch if you want to have it react to file changes in your scss file.

Or perhaps you were trying to get a unminified and a minified version alongside. In that case, you'll simply have to run two commands. Again, gulp is there to automate this process.

Other binaries will have different flags and options, and of course there is the gulp option which I'd certainly recommend given you then don't have to remember any lengthy commands and you can share your chosen structure/tasks accross projects.