如何用node-sass为压缩后的文件添加.min.css扩展名？

你遇到的问题是node-sass编译SCSS时，无法将输出文件扩展名改为.min.css，以下是可行的解决办法：

方法1：单文件编译直接指定输出文件名 #

如果是单个SCSS文件，直接在命令中指定输出的完整文件名，而非目录：

node-sass --watch scss/style.scss dist/style.min.css --output-style compressed

运行后会监听scss/style.scss的变化，编译并输出为dist/style.min.css。

方法2：目录编译结合重命名脚本 #

如果需要编译整个目录下的SCSS文件，node-sass的--out-file-extension参数在部分旧版本（如v4.x）存在兼容性问题，可通过npm脚本结合重命名命令实现：

在项目的package.json中添加以下脚本：

"scripts": {
  "build:css": "node-sass scss -o dist --output-style compressed && rename 's/\\.css$/\\.min.css/' dist/*.css",
  "watch:css": "nodemon --watch scss -e scss --exec 'npm run build:css'"
}

• 运行npm run build:css：一次性编译所有SCSS文件到dist目录，再批量将.css后缀改为.min.css
• 运行npm run watch:css：监听SCSS文件变化，自动执行编译和重命名（需先安装nodemon：npm install nodemon --save-dev）

方法3：替换为dart-sass（推荐） #

node-sass已停止维护，官方推荐使用dart-sass（npm包名为sass），它完美支持--out-file-extension参数：

1. 先卸载node-sass，安装sass：

npm uninstall node-sass && npm install sass --save-dev

2. 使用以下命令监听编译：

sass --watch scss:dist --style compressed --out-file-extension .min.css

运行后会自动将scss目录下的文件编译到dist目录，且扩展名变为.min.css。

关于你之前命令的问题说明 #

• 第一条命令中，node-sass部分旧版本不支持目录编译时的--out-file-extension参数，导致无法修改扩展名
• 第二条命令中，-o参数是指定输出目录，而非文件名，所以dist/style.min.css会被识别为目录，最终还是在该目录下生成style.css

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