Использование scss в проекте Expo - объект импортированных стилей всегда пуст ⇐ CSS

[Anonymous]

Я использую response-native-sass-transformer для использования scss в своем выставочном проекте React Native.
Чтобы настроить, я запустил npm install -- save-dev response-native-sass-transformer sass, настроил мои .metro.config.js и app.json в соответствии с инструкциями, разделил мои стили в новый .scss и импортировал их следующим образом: стили импорта из "./SignInScreen.scss";.
Когда я распечатываю значение стилей , это всегда пустой объект ({}). Как мне добиться правильного импорта стилей?
Если это имеет значение, я использую Expo Go.
Вот мой Metro.config.js :
const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
const config = getDefaultConfig(__dirname);

const { transformer, resolver } = config;

config.transformer = {
...transformer,
babelTransformerPath: require.resolve("react-native-sass-transformer")
};

config.resolver = {
...resolver,
sourceExts: [...resolver.sourceExts, "scss", "sass"]
};

return config;
})();

Вот мой app.json:
{
"expo": {
...
"packagerOpts": {
"config": "metro.config.js",
"sourceExts": ["js", "jsx", "scss", "sass"]
},
...
}
}

Вот мой SignInScreen.scss:
.container {
flex: 1;
justify-content: center;
padding: 16px;
}

.title {
font-size: 24px;
margin-bottom: 16px;
text-align: center;
}

.input {
height: 40px;
border-color: gray;
border-width: 1px;
margin-bottom: 12px;
padding-left: 8px;
}

Вот мой SignInScreen.js:
import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet, TouchableWithoutFeedback, Keyboard } from 'react-native';
import { firebaseAuth } from '../../firebaseConfig';
import styles from "./SignInScreen.scss";

console.log("styles ", styles);

const SignInScreen = ({ navigation }) => {
{...}

return (


Sign In

{...}


);
};

export default SignInScreen;


Подробнее здесь: https://stackoverflow.com/questions/786 ... ways-empty