kszitt / react-native-sass-to-stylesheet

css和sass文件自动转换成react-native样式文件

语言

English

描述

css文件自动转换成react-native样式文件。
1、支持变量
2、支持媒体查询
3、支持嵌套
4、支持transform
5、适配各种手机
6、支持群组选择器
7、忽略文件
8、scss文件支持@import

安装

npm install react-native-sass-to-stylesheet --save-dev

使用

初始化

新建toStyles.js，并添加以下内容

const ToStyles = require("react-native-sass-to-stylesheet");

ToStyles.init(path[, options]);

.init(path[, options])

• path{string} 要监听的文件夹路径，必须
• options{object}
  • space{number} css文件缩进值，默认2
  • postfix{string} 转换生成的js文件后缀，默认Style.js。例如：home.scss转换生成homeStyle.js
  • initTransform{boolean} 启动服务后，是否自动转换所有的css文件，默认false
  • adaptation{boolean} 适配各种手机，默认true。如果单个样式不需要适配，请添加 !important标志
  • templatePath{string} 自动转换文件模板路径，默认./template.js
  • ignored{array} 忽略文件"xxx.scss"，忽略文件夹"home"或者"component/home"，默认[]。

启动

node toStyles.js

SCSS文件

在.init()的path目录下，创建、修改css或者scss文件，保存。会在当前目录下生成js文件。例如：home.scss如下

.header {
  font: 12px/24px;
  .logo {
    position: absolute;
    .img {
      width: 100px;
      height: 100px;
    }
  }
}

转换后，生成的homeStyle.js

import {StyleSheet, PixelRatio, Dimensions} from 'react-native';
const pixelRatio = PixelRatio.get();
let {width, height} =  Dimensions.get('window');

function getAdaptation(num){    // 可以在"options.templatePath"模板中自定义该函数
  let unitWidth = width / 1080; // 1080 => UI设计图的宽度
  return parseFloat((num*unitWidth).toFixed(2));
}

let styles = {
  header: {
    fontSize: getAdaptation(12),
    lineHeight: getAdaptation(24)
  },
  header_logo: {
    position: "absolute"
  },
  header_logo_img: {
    width: getAdaptation(100),
    height: getAdaptation(100)
  }
};

const styleSheet = StyleSheet.create(styles);
export default styleSheet;

在react native中使用

import Style from "homeStyle.js";
...
render(){
    return (
       <View style={Style.header}>
           <View style={Style.header_logo}>
               <Image source={...} style={Style.header_logo_img}/>
           </View>
       </View>
    );
}

示例

font

.main {
  font: italic bold 12px/24px "Arial";
  font-variant: small-caps, lining-nums;
}

↓ ↓ ↓ ↓ ↓ ↓

let styles = {
  main: {
    fontVariant: [
      "small-caps",
      "lining-nums"
    ],
    fontSize: getAdaptation(12),
    lineHeight: getAdaptation(24),
    fontStyle: "italic",
    fontWeight: "bold",
    fontFamily: "Arial"
  }
};

margin padding

.main {
  margin: 0 10px;
  padding: 1px 2px 3px;
}

↓ ↓ ↓ ↓ ↓ ↓

let styles = {
  main: {
    marginTop: 0,
    marginBottom: 0,
    marginRight: getAdaptation(10),
    marginLeft: getAdaptation(10),
    paddingTop: getAdaptation(1),
    paddingBottom: getAdaptation(3),
    paddingRight: getAdaptation(2),
    paddingLeft: getAdaptation(2),
  }
};

border

.main {
  border: 1px solid #333;
}

↓ ↓ ↓ ↓ ↓ ↓

let styles = {
  main: {
    borderWidth: getAdaptation(1),
    borderColor: "#333",
    borderStyle: "solid"
  }
};

text-decoration

.main {
  text-decoration: underline solid red;
}

↓ ↓ ↓ ↓ ↓ ↓

let styles = {
  main: {
    textDecorationLine: "underline",
    textDecorationColor: "red",
    textDecorationStyle: "solid"
  }
};

text-shadow

.main {
  text-shadow: 5px 5px 10px red;
}

↓ ↓ ↓ ↓ ↓ ↓

let styles = {
  main: {
    textShadowOffset: {
      width: getAdaptation(5),
      height: getAdaptation(5)
    },
    textShadowRadio: getAdaptation(10),
    textShadowColor: "red"
  }
};

shadow

.main {
  box-shadow: 10px 10px 5px .5 #888888;
}

↓ ↓ ↓ ↓ ↓ ↓

let styles = {
  main: {
    shadowOffset: {
      width: getAdaptation(10),
      height: getAdaptation(10)
    },
    shadowRadio: getAdaptation(5),
    shadowOpacity: .5,
    shadowColor: "#888888"
  }
};

transform

.main {
  transform: translate(10px, 20px) rotateY(-10.3deg) scaleX(.5) skew(60deg);
}

↓ ↓ ↓ ↓ ↓ ↓

let styles = {
  main: {
    transform: [
      {
        translateX: getAdaptation(10),
        translateY: getAdaptation(20)
      },
      {
        rotateY: "-10.3deg"
      },
      {
        scaleX: .5
      },
      {
        skewX: "60deg"
      }
    ]
  }
};

变量

$size: 12px !global; // 别的页面也可以使用
$color: red;
.header {
  font: $size/24px;
  .left {
    color: $color;
  }
}

↓ ↓ ↓ ↓ ↓ ↓

let styles = {
  header: {
    fontSize: getAdaptation(12),
    lineHeight: getAdaptation(24)
  },
  header_left: {
    color: "red"
  }
};

@import

@import "../header.scss"; // 必须写后缀名
.header {
  color: red;
}

// header.scss
.header {
  width: 100px;
}

↓ ↓ ↓ ↓ ↓ ↓

let styles = {
  header: {
    width: getAdaptation(100),
    color: "red"
  }
};

群组选择器

.main {
  display: flex;
  .left, .right {
    position: absolute;
    left: 0;
  }
  .left {
    left: 10px;
  }
}

↓ ↓ ↓ ↓ ↓ ↓

let styles = {
  main: {
    display: "flex"
  },
  main_left: {
    position: "absolute",
    left: getAdaptation(10)
  },
  main_right: {
    position: "absolute",
    left: 0
  }
};

媒体查询

.main {
  width: 500px;
}
@media only screen and (min-width: 500px) and (max-width: 1000px) {
  .main {
    width: 100%;
    height: 1000px;
  }
}

↓ ↓ ↓ ↓ ↓ ↓

import {StyleSheet, PixelRatio, Dimensions} from 'react-native';
const pixelRatio = PixelRatio.get();
let {width, height} =  Dimensions.get('window');

function getAdaptation(num){    // 可以在"options.templatePath"模板中自定义该函数
  let unitWidth = width / 1080; // 1080 => UI设计图的宽度
  return parseFloat((num*unitWidth).toFixed(2));
}

let styles = {
  main: {
    width: getAdaptation(500)
  },
  main_top: {
    fontSize: getAdaptation(12)
  }
};


let media = {
  "width>=500&&width<=1000": {
    main: {
      width: "100%",
      height: getAdaptation(1000)
    }
  }
};

// 媒体查询
(function addMedia(){   // 可以在"options.templatePath"模板中自定义该函数
  for(let k in media){
    if(eval(k)){
      for(let j in media[k]){
        styles[j] = Object.assign(styles[j] || {}, media[k][j]);
      }
    }
  }
}());
const styleSheet = StyleSheet.create(styles);
export default styleSheet;

自动生成模板

默认的自动生成模板

import {StyleSheet, PixelRatio, Dimensions} from 'react-native';
const pixelRatio = PixelRatio.get();
let {width, height} =  Dimensions.get('window');

function getAdaptation(num){
  let unitWidth = width / 1080; // 1080 => UI设计图的宽度
  return parseFloat((num*unitWidth).toFixed(2));
}

let styles = {};
let media = {};

const styleSheet = StyleSheet.create(styles);

export default styleSheet;

使用自定义模板

修改init(path[, options])中options.templatePath模板路径，写入你的模板。

react-native-sass-to-stylesheet's Issues

template文件怎么配置 配置了不起作用

template文件怎么配置 配置了不起作用

想问一下，css转RN样式应用的场景有哪些呢

想问一下，css转RN样式应用的场景有哪些呢，另外，有没有react转react native的实现方案或思路，谢谢！

希望能够支持 scss 语法

目前好像只能支持 变量
不支持 function mixin placeholder include extend 等 能不能把sass loader整合进去

.scss文件不支持@import 吗

我使用一个params.scss 放置变量，@import params.scss后 使用params.scss中的变量报(node:26088) UnhandledPromiseRejectionWarning: TypeError: Cannot read property '0' of null;

是否是不支持，如果不支持，这个变量的价值不大。

还有什么时候能支持继承，这个功能我在看到react-native-sass-transformer里面支持，但是里面的功能相对于react-native-sass-to-stylesheet 缺少适配方法以及嵌套等。

很感谢你把这个插件分享出来，给了我很大的便利。

运行 node toStyles.js

错误提示：
UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'match' of undefined
at GlobalVariable.scss.replace.text (D:\XX\XX\XXX\node_modules\react-native-sass-to-stylesheet\lib\variable.js:33:35)