如何在React Native项目中使用scss？

Question

有没有一种方法可以在React Native应用程序中使用scss文件？我只是好奇并且对React Native应用程序架构了解不多，但是正在考虑使用我的当前项目的scss文件来处理我们计划构建的新的React Native Android项目。

REACT NATIVE VERSION : "0.46.4"
REACT VERSION : "16.0.0-alpha.12"
BABEL-PRESET-REACT-NATIVE: "2.1.0"

更新：
我搜索了一下，发现了css-to-react-native这个工具，它让我可以将我的CSS转换为React Native样式表对象，这对我来说是一个变通方法。
谢谢。

- Vipul Panth

Answer 1

TL;DR: 是的，你可以。

https://github.com/kristerkari/react-native-sass-transformer

它接收 SCSS 代码，例如：

.myClass {
  color: blue;
}
.myOtherClass {
  color: red;
}

并将其转换为

var styles = {
  myClass: {
    color: "blue"
  },
  myOtherClass: {
    color: "red"
  }
};

简单易懂。

- sadhucoder

---

很遗憾，这个软件包几乎不再得到维护。也许它能够运行，但请不要指望它会有很多改进。 - Martin Braun

尝试使用expo v45.0.0和react-native v0.68.2，但它不起作用。需要维护。 - ozgrozer

Answer 2

简短概述: 不可以。

在React Native中，我们使用内联样式，可以通过Stylesheet.create实现。

为什么你不能像使用CSS一样进行样式设计呢？因为在React Native中没有#id或.class，所以你不能像在CSS样式中那样将样式应用到#id或.class中。而且，在React Native中也没有相关的样式，就像在CSS样式中可以使用.element1 > .element2一样。

我认为大多数开发者使用scss的主要原因是使用嵌套类定义，例如下面的例子：

.element1 {
  > .element2 {
    ...
  }
} 

由于React Native组件中没有像class这样的特性，因此在React Native中无法应用此类方法。

以下是如何创建样式的示例：

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

- Alfian Busyro

---

感谢您的时间。我能够进行研究并找到一个解决方法。 - Vipul Panth

Vipul：你能告诉我们解决办法吗？我们陷入了类似的困境。 - NG.

@NG。我编写了代码，首先使用node-sass将我的SCSS文件转换为CSS，然后转换为JSON文件，最后将其作为JSON对象导入到我的文件中，并使用[https://github.com/aramk/CSSJSON] CSS-JSON转换器将JSON对象转换为CSS对象。最后，使用CSS-TO-REACT-NATIVE作为CSS到样式表对象的转换器。 - Vipul Panth