2022年Sass中@use批量导入文件夹文件的现代插件咨询

一、适配新模块系统的现有工具 #

目前2020年后更新的、支持@use/@forward批量导入的工具选择不多，但可以尝试以下两个方向：

• sass-glob-use-forward：专门针对Sass新模块系统开发的工具，支持用@use-glob "article/*.scss"这类通配符语法，编译时会自动转换为多个标准@use语句。可以在Gulp工作流中加入预处理步骤，用它处理Sass文件后再交给原生Sass编译。
• gulp-sass-module-glob：由社区维护的分支插件，在原glob插件基础上适配了@use和@forward语法，最近两年有维护记录，能将通配符批量导入转换为符合新规范的语句。

二、自定义Gulp脚本生成索引文件 #

如果找不到合适的插件，自定义脚本是最稳定的解决方案，步骤如下：

1. 在Gulp任务中用glob模块遍历目标文件夹下的所有Sass文件（排除索引文件本身）
2. 自动生成包含所有@forward语句的index.scss文件
3. 主Sass文件只需通过@use "article/index.scss"完成批量导入

示例Gulp代码：

const gulp = require('gulp');
const glob = require('glob');
const fs = require('fs');
const sass = require('gulp-sass')(require('sass'));

// 自动生成Sass索引文件
gulp.task('generate-sass-index', (done) => {
  const targetDir = './src/scss/article';
  // 匹配文件夹内所有scss文件，排除index.scss
  glob(`${targetDir}/!(index).scss`, (err, files) => {
    if (err) throw err;
    // 转换为@forward语句，路径相对index.scss
    const forwardLines = files.map(file => {
      const relativePath = file.replace(`${targetDir}/`, '').replace('.scss', '');
      return `@forward "${relativePath}";`;
    }).join('\n');
    // 写入索引文件
    fs.writeFileSync(`${targetDir}/index.scss`, forwardLines);
    done();
  });
});

// 主编译任务，依赖索引文件生成
gulp.task('sass', gulp.series('generate-sass-index', () => {
  return gulp.src('./src/scss/main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'));
}));

该脚本会在每次编译前自动更新索引文件，无需手动维护文件列表，完全适配原生Sass的模块系统。

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