如何将使用@use规则的多份Dart SCSS文件打包为单个未编译SCSS文件

以下是支持@use规则、可将分散SCSS文件打包为单个未编译SCSS文件的可靠方案： #

方案1：使用@11ty/sass-bundle（推荐） #

这是目前维护状态稳定、原生支持Sass现代模块规则的打包工具，完全兼容@use、@forward语法，不会将代码编译为CSS，仅做源码合并。

• 安装依赖

npm install @11ty/sass-bundle --save-dev

• 新建打包脚本scss-bundle.js

const { SassBundle } = require("@11ty/sass-bundle");

async function buildBundle() {
  const bundle = new SassBundle();
  // 替换为你的项目入口SCSS文件路径
  await bundle.add("./src/index.scss");
  // 替换为你想要输出的单文件路径
  await bundle.write("./dist/sinister.scss");
  console.log("SCSS单文件打包完成");
}

buildBundle();

• 在package.json中添加执行脚本

{
  "scripts": {
    "bundle-scss": "node scss-bundle.js"
  }
}

执行npm run bundle-scss即可得到合并完成的单文件。 #

方案2：自定义Node脚本（零额外依赖） #

如果你的项目不想引入额外第三方依赖，可以自己写简单的递归处理脚本实现打包：

• 核心逻辑步骤：
  • 读取入口SCSS文件内容
  • 正则匹配所有@use、@forward语句，解析对应的相对路径找到目标文件
  • 去重后将目标文件内容替换对应的引入语句
  • 递归处理所有嵌套引入的文件，最终输出合并后的完整内容到单文件

方案3：Gulp生态工具 #

如果你的项目已经在使用Gulp做构建流，可以接入gulp-sass-bundle插件，配置后直接嵌入现有构建流程即可，同样支持现代Sass模块规则。 #

注意事项 #

• 打包前确认所有@use/@forward使用的是相对路径，若用了路径别名需要先配置工具的别名映射规则
• 如果你的库对外暴露了公共API，建议先在入口文件统一用@forward导出所有成员，打包后用户直接引入单文件即可正常调用所有mixin、变量、函数，不需要调整命名空间。

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