Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react-native:寻找像写scss那样写react native 样式的方法 #16

Open
youngwind opened this issue Dec 27, 2015 · 0 comments
Open
Labels

Comments

@youngwind
Copy link
Owner

前言

我深信:learn once,write anywhere. 目前react-native的样式是通过像下面这样子来创建的。

var styles = StyleSheet.create({
  //container
  container: {
    backgroundColor: '#F2F2F2',
    flex: 1,
  },
});

从前端开发的角度来看,这是内联样式啊!肯定要提到scss文件中去啦!所以我在寻找如何在react native的样式写到scss文件中的方法。
#1. react-native-css

此npm包号称可以把scss文件文件转化为js文件,然后再组件中require进去就可以了。但是我还有一个问题没有解决,导致目前还不能用这个。

React-native-cli doesn't use the node module ecosystem. The basic setup up is to have React-native running on one terminal, and the react-native-css on another. React-native-css will watch for changes and compile back to javascript.

我直接在terminal中执行 react-native-css就直接报错了,暂时没找到解决方法。

bash: react-native-css: command not found

更新》》》》》》》》》》》》
通过与作者issue,已经找到解决方案:react-native-css 需要全局安装,可能的原因是我的react-native-cli也是全局安装的,这个需要保持一致。
但是却引发了另一个问题,react-native-css不能watch住我的scss文件,有待解决....

而且还有另外一个问题。example中的例子是这样的。

description {
  margin-bottom: 20;
  font-size: 18;
  text-align: center;
  color: #656656;
}

如果在scss文件中这样写样式的话,肯定会报语法错误的啊。因为description不是合法的选择器。显然我需要的是差不多像下面这样的,也能成功转换的。这样就完全像在写scss了。learn once,write anywhere嘛~~

.description {
  margin-bottom: 20;
  font-size: 18;
  text-align: center;
  color: #656656;
}

未完待续。。。。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant