能否通过node-sass批量导入子目录下所有.scss文件？

嘿，刚好对这个问题挺熟的，来给你捋清楚～

首先直接给结论：node-sass本身并不支持@import './directory/**/*.scss'这种通配符批量导入语法。因为Sass原生的@import规则只支持单个文件、下划线开头的部分文件，或是目录下的_index.scss文件，并不支持**这种多级匹配的glob通配符模式。

不过别担心，有几种替代方案能实现类似的批量导入效果：

• 利用目录导入特性手动维护导入列表
  如果你的目标目录下创建一个_index.scss文件，在这个文件里逐个导入目录内及子目录的所有SCSS文件，然后在主样式文件里只需要写@import './directory';就能一次性导入所有关联文件了。比如：

  // directory/_index.scss
  @import './button';
  @import './card';
  @import './components/modal';
  @import './utils/mixins';
  

  这种方式适合文件数量不多、变动不频繁的场景，好处是能精准控制导入顺序。

• 用Node脚本自动生成导入语句
  既然node-sass基于Node.js，我们可以借助Node脚本+glob模块来自动遍历目录下所有SCSS文件，生成一个包含所有导入语句的文件。步骤如下：

  1. 先安装依赖：npm install glob --save-dev
  2. 写一个简单的脚本文件（比如generate-imports.js）：

     const glob = require('glob');
     const fs = require('fs');
     
     // 匹配目标目录下所有非下划线开头的SCSS文件（可根据需求调整规则）
     glob('./src/styles/**/!(_)*.scss', (err, files) => {
       if (err) throw err;
       // 生成导入语句，注意路径要符合Sass的导入规则
       const importStatements = files.map(file => `@import '${file.replace(/^\.\//, '')}';`).join('\n');
       // 写入到一个临时导入文件中
       fs.writeFileSync('./src/styles/_auto-imports.scss', importStatements);
     });
     

  3. 在主样式文件里导入这个自动生成的文件：@import './auto-imports';
  4. 还可以把脚本加到package.json的scripts里，方便执行："generate-imports": "node generate-imports.js"

• 借助构建工具实现批量导入
  如果你的项目用webpack等构建工具，可以结合sass-loader和相关loader实现自动批量导入。比如使用glob-loader：

  1. 安装依赖：npm install glob-loader --save-dev
  2. 在主SCSS文件里这样写：

     @import '~glob-loader!./directory/**/*.scss';
     

     这种方式会让webpack自动遍历匹配的文件并导入，适合大型项目，无需手动维护导入列表。

另外补充一句：现在Sass官方更推荐使用Dart Sass替代node-sass（node-sass已经停止维护了），虽然Dart Sass同样不原生支持glob批量导入，但上面提到的这些方案同样适用，而且Dart Sass的兼容性和性能表现更好，有机会的话可以考虑升级哦～

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