3.8 RxScss

优质

小牛编辑

129浏览

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