如何在npm脚本中传参实现单命令编译任意Sass文件？

当然有完美的解决方案！npm脚本本身支持参数传递，结合简单的写法就能实现你想要的「单条指令编译任意Sass文件」的需求，下面给你两种实用的实现方式：

方法一：直接利用npm参数传递（轻量跨平台） #

这种方式不需要额外写脚本文件，直接通过npm的参数机制实现，适配Windows和Unix类系统：

1. 在package.json的scripts中添加以下指令：

"scripts": {
  "compile": "node-sass scss/$npm_config_target.scss css/$npm_config_target.css -w"
}

2. 编译指定文件时，执行命令：

npm run compile --target=home

这条命令会自动映射为 node-sass scss/home.scss css/home.css -w，完全匹配你的预期。

如果觉得--target=xxx的写法繁琐，也可以用更简洁的参数传递方式：

"scripts": {
  "compile": "node-sass scss/$1.scss css/$1.css -w"
}

执行时使用：

npm run compile -- home

注意：--是npm用来区分「npm命令参数」和「脚本自身参数」的分隔符，必须加上才能把后面的home传递给编译脚本。

方法二：用Node.js脚本增强灵活性（推荐） #

如果需要更复杂的逻辑（比如自动创建css目录、参数校验、错误提示），可以写一个简单的Node.js中间脚本，跨平台兼容性更好：

1. 在项目根目录创建compile-sass.js文件，内容如下：

const { execSync } = require('child_process');
const fs = require('fs');

// 获取命令行传入的目标文件名
const targetFile = process.argv[2];

if (!targetFile) {
  console.error('❌ 请指定要编译的Sass文件名，例如：npm run compile home');
  process.exit(1);
}

// 自动创建css目录（如果不存在）
if (!fs.existsSync('./css')) {
  fs.mkdirSync('./css');
}

// 执行编译命令并同步输出日志
try {
  execSync(`node-sass scss/${targetFile}.scss css/${targetFile}.css -w`, {
    stdio: 'inherit'
  });
} catch (err) {
  console.error('❌ 编译失败:', err.message);
}

2. 在package.json中配置脚本：

"scripts": {
  "compile": "node compile-sass.js"
}

3. 编译时只需执行：

npm run compile home

这条命令不仅能触发预期的编译操作，还能自动处理目录缺失、参数为空等异常情况，体验更流畅。

额外小技巧 #

如果想要保留npm run compile:home这种带冒号的快捷写法，也可以给常用文件添加别名脚本：

"scripts": {
  "compile": "node compile-sass.js",
  "compile:home": "npm run compile -- home",
  "compile:about": "npm run compile -- about"
}

这样既保留了通用编译能力，又能快速触发常用文件的编译。

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