3.8 RxScss
优质
小牛编辑
131浏览
2023-12-01
RxScss 是我们专门为 Rx 样式 所做的css语法糖,配合 rx-css-loader, 你可以像写传统web 的css一样,书写样式。
- 新建一个style.rxscss,在里面写上如下代码:
@import './variable.rxscss';
.container{
align-items: center;
flex-direction: column;
justify-content: center;
}
.text{
font-size: 60rem;
color:$color-b1-6;
}
- 新建一个variable.rxscss,在里面写上如下代码:
$color-b1-6:#3089DC !default;
- 新建一个index.jsx,在里面写上如下代码:
/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text} from 'nuke';
import styles from './style.rxscss';
import {mount} from 'nuke-mounter';
class Demo extends Component {
constructor() {
super();
}
render(){
var self=this;
return (
<View style={styles.container}>
<Text style={styles.text}>大家好</Text>
</View>
)
}
}
mount(<Demo />, 'body');