Gulp v5 ESM环境下gulp-sass与sass无法解析SCSS导入问题

背景 #

使用Gulp v5.0（已迁移至ES Modules）编译CSS，需集成无修改权限的第三方自定义组件，通过gulp-sass + dart-sass编译其SCSS时遇到导入错误。

配置代码 #

gulpFile.js

import gulp from 'gulp';
import * as dartSass from 'sass';
import gulpSassModule from 'gulp-sass';
import path from 'path';
import concat from 'gulp-concat';

const sass = gulpSassModule(dartSass);

const ddsPathIncludes = [   
  path.resolve("node_modules/@CustomComponent/components/src/components/accordion")
];

let pipeline = gulp.src(bundle.inputFiles);

pipeline = pipeline
  .pipe(sass({  
    includePaths: ddsPathIncludes                  
  }).on("error", sass.logError))
  .pipe(concat("abc.min.css"))
  .pipe(gulp.dest(path.join(DIST_DIR, "css")));

imports-custom.scss

@use 'accordion';

错误信息 #

运行Gulp任务时抛出：

Error in plugin "sass"
Can't find stylesheet to import.
  ╷
1 │ @import 'accordion';

项目依赖版本 #

"gulp": "^5.0.0",
 "gulp-sass": "^6.0.0",
 "sass": "^1.85.0",  

已尝试操作 #

• 确认_accordion.scss存在于node_modules/@dds/components/src/components/accordion/目录；
• 在gulp-sass中设置includePaths指向accordion目录；
• 尝试@use 'accordion/accordion';并添加.scss扩展名；
• 打印解析后的includePaths确认路径正确。

疑问 #

1. 为何设置正确includePaths后，Sass仍无法解析@use 'accordion'？
2. gulp-sass在ESM环境中是否存在特定问题导致该情况？
3. 在不修改自定义组件的前提下，ESM Gulp环境中导入其SCSS的最佳方式是什么？

1. 无法解析@use 'accordion'的原因 #

Sass的@use指令查找下划线开头的局部文件（如_accordion.scss）时，逻辑是在includePaths指定的目录下查找匹配名称的文件夹，再在文件夹内寻找对应局部文件。你当前把includePaths直接指向了accordion文件夹本身，Sass会在这个文件夹下去找_accordion.scss，自然找不到。正确的做法是将includePaths设置为accordion所在的上级目录。

2. gulp-sass在ESM环境的兼容性问题 #

目前gulp-sass v6.0.0和Gulp v5的ESM环境没有已知核心兼容性问题，你遇到的问题本质是Sass路径解析逻辑的问题，和ESM模块系统无关。仅需注意：在ESM中使用path.resolve时，确保任务从项目根目录运行，避免工作目录错误导致路径解析偏差（你已确认路径正确，可排除此情况）。

3. 不修改组件的最佳导入方式 #

调整includePaths到正确的上级目录，即可让@use 'accordion';正常解析，具体修改如下：

修改gulpFile.js中的includePaths #

const ddsPathIncludes = [   
  path.resolve("node_modules/@CustomComponent/components/src/components")
];

设置后，Sass会在components目录下找到accordion文件夹，自动匹配里面的_accordion.scss局部文件。

如果调整路径后仍有问题，可临时用完整文件名导入（不带下划线）：

@use 'accordion/accordion';

但优先推荐调整includePaths的方式，保持导入语法简洁。

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