Gatsby项目导入SCSS或CSS样式不生效，该如何解决？

根因定位 #

该问题90%以上的场景是因为gatsby-plugin-sass仅提供Sass与Gatsby的集成能力，本身不包含Sass编译核心，用户未单独安装Sass依赖导致编译失败。其余可能原因包括文件路径不匹配、配置未生效、本地缓存异常。

分步排查方案 #

• 安装Sass核心依赖
  官方已弃用node-sass，推荐直接安装dart-sass对应包：

  npm install sass
  # 或使用yarn
  yarn add sass
  

• 校验文件路径与命名
  确认项目src目录下的文件结构符合导入路径要求：存在styles文件夹，且文件夹内文件名为home.module.scss，完全匹配大小写，Mac、Linux系统对文件名大小写敏感，拼写不一致会直接导入失败。
• 重启开发服务
  修改gatsby-config.js配置文件后，必须手动停止当前运行的gatsby develop进程，重新执行启动命令才会加载新的插件配置。
• 清理本地缓存
  上述步骤都执行后仍报错，可执行gatsby clean清理Gatsby生成的缓存文件，再重新启动开发服务即可解决。

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