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');