在Expo项目中使用scss——导入的样式对象始终为空

Question

我正在使用

react-native-sass-transformer

在我的 React Native Expo 项目中使用 scss。

为了进行设置，我运行

npm install --save-dev react-native-sass-transformer sass

，根据说明配置我的

.metro.config.js

和

app.json

，将我的样式分离到新的

.scss

文件中，然后像这样

import styles from "./SignInScreen.scss";

一样导入它们。

当我打印出

styles

的值时，它始终是一个空对象（

{}

）。如何正确导入我的样式？

如果重要的话，我正在使用 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 (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View style={styles.container}>
        <Text style={styles.title}>Sign In</Text>
        <TextInput
          style={styles.input}
          placeholder="Email"
          value={email}
          onChangeText={setEmail}
        />
        {...}
      </View>
    </TouchableWithoutFeedback>
  );
};

export default SignInScreen;

Answer 1

我发现这个问题与您的问题类似。链接：https://github.com/expo/expo/issues/27490

根据标记，您应该可以简单地删除

react-native-sass-transformer

。 （未测试） 或者降级到版本48。

但是你的代码看起来不错。