如何基于NPM与SASS遍历子文件夹编译SCSS文件

前置说明 #

官方已弃用node-sass，当前推荐使用npm上的sass包（基于Dart Sass），以下步骤完全匹配你的需求：

1. 安装依赖 #

先清理可能存在的旧依赖，再安装官方Sass：

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

2. 选择编译方案（二选一） #

因为Sass原生命令不支持批量遍历子目录，需要借助脚本实现批量编译：

方案一：Node.js脚本（跨平台、灵活） #

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

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

// 递归遍历目录，筛选非局部SCSS文件
function findScssFiles(dir) {
  let scssFiles = [];
  const files = fs.readdirSync(dir);
  for (const file of files) {
    const fullPath = path.join(dir, file);
    const stat = fs.statSync(fullPath);
    if (stat.isDirectory()) {
      scssFiles = scssFiles.concat(findScssFiles(fullPath));
    } else if (file.endsWith('.scss') && !file.startsWith('_')) {
      // 排除下划线开头的局部文件（这类文件仅用于导入，无需单独编译）
      scssFiles.push(fullPath);
    }
  }
  return scssFiles;
}

// 获取所有目标SCSS文件并编译
const scssFiles = findScssFiles('./');
scssFiles.forEach(file => {
  const cssFile = file.replace('.scss', '.css');
  execSync(`npx sass ${file} ${cssFile}`, { stdio: 'inherit' });
  console.log(`编译完成：${cssFile}`);
});

方案二：Glob+NPM脚本（简洁，适合类Unix系统） #

先安装glob用于匹配文件：

npm install glob --save-dev

在package.json的scripts中添加编译命令：

{
  "scripts": {
    "compile-scss": "glob \"**/*.scss\" --ignore \"**/_*.scss\" | xargs -I {} npx sass {} {}.css && rename 's/\\.scss\\.css$/.css/' **/*.scss.css"
  }
}

注：Windows系统需替换rename命令，可改用PowerShell命令或安装rename-cli包替代。

3. 配置NPM脚本（方便调用） #

不管用哪种方案，都可以在package.json中添加快捷命令：

{
  "scripts": {
    "compile-scss": "node compile-scss.js", // 对应方案一
    "watch-scss": "node compile-scss.js && npx sass --watch **/*.scss --no-source-map"
  }
}

运行编译命令：

npm run compile-scss

4. 验证与扩展 #

• 编译完成后，每个SCSS文件所在目录会生成同名CSS文件，完全匹配你给出的示例结构。
• 若需要压缩CSS，在Sass命令后添加--style compressed参数，例如：npx sass ${file} ${cssFile} --style compressed。
• 若需要生成Source Map，去掉--no-source-map参数即可。
• 若要编译下划线开头的局部文件，删除脚本中!file.startsWith('_')的判断逻辑。

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