背景
在项目中需要通过rem单位来实现页面适配不同分辨率,之前都是通过设置计算的比例为10或100手动计算,或者IDE提供的插件来实现,现在考虑通过node来实现一个通用的批量转换项目中的样式文件中单位的工具。
实现
开发的思路是以文件为单位,按文件来批量转换,这时只需要设置一些与文件相关的配置项来选择需要转换的文件即可,而转换的算法利用了css插件,通过使用插件取得样式后再依次转换即可。
使用
- 安装
yarn add node-px2rem-converter -D
- 初始化
"./node_modules/.bin/px2rem" -I
- 开始转换
"./node_modules/.bin/px2rem" -R
初始化以后,插件自动在项目的根目录中生成一个名为px2rem.yml的配置文件,在转换之前需要设置一些配置项,如配置转换的文件位置和计算的比例等。
配置文件
includeDirs
执行转换的目录的路径,默认为src
目录
excludeDirs
不执行转换的目录的路径
excludeFiles
不执行转换的文件的路径,这个配置和excludeDirs都是在includeDirs中过滤对应的目录和文件
includeFiles
执行转换的文件的路径,这里的文件与目录的设置是单独的,文件可以不在已设置的转换目录中,同时目录和设置不转换的文件配置不会影响此设置
fileTypes
执行转换的文件的类型,默认为css
和less
,目前只支持css
和less
类型的文件,后续开发时考虑加入其他类型的文件
ratio
转换的比例设置,默认为100
eol
使用的换行符,可以选择\n
和\r\n
两种的一种,默认为当前系统默认的换行符