Expo项目中使用react-native-sass-transformer导入样式对象为空求助

1. 修正Metro配置（适配Expo版本） #

Metro默认可能将SCSS视为资源文件而非源文件，需调整配置确保转换器正确识别：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// 将SCSS/SASS加入源扩展名列表
config.resolver.sourceExts = [...config.resolver.sourceExts, 'scss', 'sass'];
// 从资源扩展名中移除SCSS/SASS，避免被当作静态资源处理
config.resolver.assetExts = config.resolver.assetExts.filter(ext => !['scss', 'sass'].includes(ext));

// 指定SASS转换器路径
config.transformer.babelTransformerPath = require.resolve('react-native-sass-transformer');

module.exports = config;

2. 彻底清除缓存 #

缓存会导致配置不生效，执行以下命令重启项目：

npx expo start --clear

同时可卸载并重装Expo Go应用，确保客户端缓存也被清除。

3. 调整Sass版本兼容性 #

react-native-sass-transformer对高版本Sass可能存在兼容问题，安装指定兼容版本：

npm uninstall sass
npm install --save-dev sass@1.54.0

4. 简化app.json配置 #

新版本Expo中，packagerOpts无需重复指定sourceExts，保留配置引用即可：

{
  "expo": {
    ...
    "packagerOpts": {
      "config": "metro.config.js"
    },
    ...
  }
}

5. 验证SCSS文件与导入路径 #

• 检查SCSS文件是否存在语法错误（比如括号不匹配、属性拼写错误），语法错误会导致转换器返回空对象；
• 确认导入路径正确，确保./SignInScreen.scss与当前JS文件在同一目录下。

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