如何用node-sass/libsass实现SCSS文件Tree Shaking或获取已用文件列表？

首先明确：node-sass 和 libsass 本身并没有内置的「Tree Shaking」功能来自动移除未被引用的输入SCSS文件——它们的核心是处理@import依赖链，只编译入口文件能追踪到的文件，但不会主动识别磁盘上未被引用的文件并剔除。不过我们可以通过依赖分析的方式，先获取所有已使用的文件列表，再手动/自动清理未使用的文件，这是目前最可行的方案。

一、获取编译时已使用的SCSS文件列表 #

要清理未使用文件，第一步是准确找出所有被入口文件间接/直接引用的SCSS文件，有两种可靠的实现方式：

1. 使用sass-graph生成依赖图（推荐） #

sass-graph是专门解析SCSS导入关系的工具，能快速生成整个项目的依赖图谱，然后我们可以基于入口文件遍历出所有被使用的文件：

首先安装依赖：

npm install sass-graph --save-dev

然后写一个简单的Node.js脚本（比如find-used-scss.js）：

const sassGraph = require('sass-graph');
const path = require('path');
const fs = require('fs');

// 配置你的SCSS根目录和入口文件
const SCSS_ROOT = path.resolve(__dirname, './src/scss');
const ENTRY_FILES = [path.resolve(SCSS_ROOT, 'main.scss')];

// 生成依赖图
const graph = sassGraph.parseDir(SCSS_ROOT);

// 遍历入口文件，收集所有被引用的文件
const usedFiles = new Set();
function traverseDependency(filePath) {
  if (usedFiles.has(filePath)) return;
  usedFiles.add(filePath);
  // 获取当前文件的所有导入项
  const imports = graph.index[filePath]?.imports || [];
  imports.forEach(importPath => traverseDependency(importPath));
}

// 处理所有入口文件
ENTRY_FILES.forEach(file => traverseDependency(file));

// 输出结果
console.log('✅ 已使用的SCSS文件列表：');
usedFiles.forEach(file => console.log(`- ${path.relative(__dirname, file)}`));

// 把结果写入文件方便后续处理
fs.writeFileSync('./used-scss-files.txt', Array.from(usedFiles).join('\n'));

运行脚本就能得到所有被使用的文件列表了。

2. 通过node-sass的importer钩子记录文件 #

如果你不想额外安装工具，可以直接利用node-sass的自定义导入器钩子，在编译过程中记录每一个被导入的文件：

const sass = require('node-sass');
const path = require('path');
const fs = require('fs');

const ENTRY_FILE = path.resolve(__dirname, './src/scss/main.scss');
const usedFiles = new Set();

sass.render({
  file: ENTRY_FILE,
  importer: (url, prevImportPath, done) => {
    // 解析导入文件的绝对路径，处理后缀自动补全
    const resolvedPath = path.resolve(path.dirname(prevImportPath), url);
    const validPaths = [resolvedPath, `${resolvedPath}.scss`, `${resolvedPath}.sass`];
    const existingPath = validPaths.find(p => fs.existsSync(p));
    
    if (existingPath) {
      usedFiles.add(existingPath);
      done({ file: existingPath });
    } else {
      done(new Error(`无法找到导入文件：${url}`));
    }
  }
}, (err, result) => {
  if (err) {
    console.error('❌ 编译出错：', err);
    return;
  }
  // 输出已使用文件
  console.log('✅ 已使用的SCSS文件列表：');
  usedFiles.forEach(file => console.log(`- ${path.relative(__dirname, file)}`));
});

这种方式会在编译过程中实时记录所有被导入的文件，适合需要和编译流程绑定的场景。

二、清理未使用的SCSS输入文件 #

拿到已使用文件列表后，我们可以写脚本遍历整个SCSS目录，对比找出未被记录的文件，然后手动核对或自动删除（注意：删除前一定要备份！）：

示例脚本find-unused-scss.js：

const fs = require('fs');
const path = require('path');

// 读取之前生成的已使用文件列表
const usedFiles = new Set(fs.readFileSync('./used-scss-files.txt', 'utf8').split('\n').filter(Boolean));
const SCSS_ROOT = path.resolve(__dirname, './src/scss');

const unusedFiles = [];

// 遍历SCSS目录
function scanDirectory(dir) {
  const items = fs.readdirSync(dir);
  items.forEach(item => {
    const fullPath = path.resolve(dir, item);
    const stats = fs.statSync(fullPath);
    if (stats.isDirectory()) {
      scanDirectory(fullPath);
    } else if (fullPath.endsWith('.scss') || fullPath.endsWith('.sass')) {
      if (!usedFiles.has(fullPath)) {
        unusedFiles.push(fullPath);
      }
    }
  });
}

scanDirectory(SCSS_ROOT);

// 输出未使用文件
console.log('⚠️ 未使用的SCSS文件列表（请手动核对后再删除）：');
unusedFiles.forEach(file => console.log(`- ${path.relative(__dirname, file)}`));

// 可选：自动删除（谨慎使用！建议先备份）
// unusedFiles.forEach(file => {
//   fs.unlinkSync(file);
//   console.log(`已删除：${path.relative(__dirname, file)}`);
// });

注意事项 #

1. 动态导入的处理：如果你的SCSS中使用了变量动态导入（比如@import "components/#{$component}"），静态分析工具可能无法识别这种动态依赖，这类文件需要你手动核对，避免误删。
2. 备份优先：在删除任何文件前，一定要先做好备份，或者先把未使用文件移到临时目录观察一段时间，确认没有影响后再彻底删除。
3. 和purgecss的区别：你提到的移除输出中未使用样式的工具（比如purgecss）是处理最终生成的CSS，而我们这里的方案是处理未被导入的SCSS源文件，两者是不同层面的优化，互不冲突，可以结合使用。

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