在反应原生项目中包括scss？

Question

有没有办法在反应本机应用程序中使用scss文件？我只是很好奇，并且对反应原生应用程序架构知之甚少，但是我正在考虑使用我当前的项目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样式表对象，对我来说有点解决方法。

感谢。

Answer 1

TL; DR ：不，你不能。

在react-native中，我们使用内联样式，您可以使用Stylesheet.create来实现。

为什么你不能 CSS 样式，In react本身没有#id .class，所以你不能将样式应用到#id或{ {1}}就像你通常用css样式做的那样。而且没有相关的风格，比如在css中你可以做.class。

我认为大多数开发人员使用scss的主要原因是使用嵌套类定义。如下：

.element1 > .element2

由于react-native组件中没有类特性，因此无法在react-native中应用此类方法。

如何在以下位置创建样式的示例：

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

Answer 2

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"
  }
};

轻松自负。