React项目引入SASS文件时报找不到variables样式表的SassError错误

该报错本质是Sass编译器无法定位到代码中@import 'variables'指定的样式文件，可按以下步骤逐一排查修复：

1. 校验文件存在性与路径正确性 #

• 首先确认项目中是否存在变量文件：Sass局部配置文件默认以下划线开头，通常命名为_variables.scss，注意文件名大小写必须完全匹配，打包工具对大小写敏感，即使Windows系统下文件名大小写不报错，编译阶段也会判定为文件不存在
• 确认引入路径匹配：报错中引入variables的文件是src/scss/components/_header.scss，如果_variables.scss存放在src/scss根目录下，需要把引入语句改为@import '../variables';，不能直接写文件名，相对路径要和实际存放位置对应

2. 配置Sass全局加载路径 #

如果确认文件和相对路径都没问题，可以通过配置全局加载路径，让Sass自动去指定目录查找引入文件，不需要写冗长的相对路径：

• 若使用未eject的Create React App搭建项目，直接在项目根目录新建.env文件，添加如下配置后重启项目即可：

SASS_PATH=src/scss

• 若使用自行配置的Webpack项目，或已经eject了CRA配置，找到webpack配置中sass-loader的配置项，添加includePaths参数：

{
  loader: 'sass-loader',
  options: {
    sassOptions: {
      includePaths: [path.resolve(__dirname, 'src/scss')]
    }
  }
}

3. 校验Sass语法与版本兼容性 #

• 新版Dart Sass已弃用@import语法，改用@use引入模块化样式，如果你的项目sass依赖版本高于1.23.0，可以把引入语句修改为@use 'variables' as *;，避免语法不兼容导致的识别错误
• 确认sass-loader和sass的版本匹配，避免跨大版本混用导致的解析异常

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