构建SPFX React WebPart时Sass导入错误求助

问题原因 #

该错误是Sass解析器无法定位@fluentui/react包内的指定样式文件导致的，常见诱因包括依赖安装不完整、包版本更新后路径变更，或是Sass配置未正确识别node_modules路径。

解决步骤 #

• 重置本地依赖，重新安装：

  1. 删除项目根目录下的node_modules文件夹
  2. 删除package-lock.json（使用npm时）或yarn.lock（使用yarn时）
  3. 执行npm install或yarn install重新拉取所有依赖

• 适配@fluentui/react版本调整导入路径：
  查看package.json里@fluentui/react的版本，若为v8及以上的新版本，原模板的导入路径可能已失效。尝试修改ReactWebpart.module.scss中的导入语句，比如将路径改为：

  @import '@fluentui/react/dist/scss/References.scss';
  

  部分新版本会把原sass目录替换为scss

• 清理gulp缓存后重新构建：
  先运行gulp clean清除旧构建缓存，再执行gulp build尝试重新编译

• 检查Sass配置的includePaths：
  确认gulp的Sass编译任务中配置了includePaths指向node_modules，确保能解析~开头的路径，示例配置如下：

  return gulp.src('./src/**/*.scss')
    .pipe(sass({
      includePaths: ['./node_modules']
    }).on('error', sass.logError))
    .pipe(gulp.dest('./dist'));
  

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