如何在Windows命令行批量编译SCSS文件？新版Sass旧命令已失效

Hey there! I get it—super frustrating when that old sass --watch command stops working after updating Sass. Let's break down how to do this properly with the latest Dart Sass (which has fully replaced the outdated Ruby Sass):

First, Ensure You're Using the Current Sass Version #

If you haven't already, install Dart Sass globally via npm (this is the official recommended method now):

npm install -g sass

If you run into issues where the sass command isn't recognized, try using npx sass instead—it guarantees you're using the version you just installed.

1. Batch Compile SCSS Files Once #

To compile all SCSS files in a folder (and preserve subfolder structure) to a target CSS folder:

sass path/to/your/scss-folder/:path/to/your/css-folder/

• Example: If your SCSS lives in src/scss and you want compiled CSS in dist/css, run:

  sass src/scss/:dist/css/
  

• If your folder names have spaces, wrap the paths in quotes to avoid errors:

  sass "src/my scss folder":"dist/my css folder"
  

2. Auto-Compile on Save (Replace Old --watch) #

The watch functionality is still there—just the syntax stays aligned with Dart Sass's structure. To keep the command line running and recompile every time you save an SCSS file:

sass --watch path/to/your/scss-folder/:path/to/your/css-folder/

• Example:

  sass --watch src/scss/:dist/css/
  

Press Ctrl + C in the command line whenever you want to stop the watch process.

Bonus: Tweak Compilation Output #

Add flags to customize how your CSS is generated:

• Minify the final CSS for production:

  sass --watch src/scss/:dist/css/ --style compressed
  

• Generate source maps to debug SCSS directly in browser dev tools:

  sass --watch src/scss/:dist/css/ --source-map
  

内容的提问来源于stack exchange，提问作者ahmad