在开发反应项目时,很多时候我们把样式写在css,少,scss里,经过像postcss这样的配置处理,但有没有这样一种需求呢,像有些样式我们直接写在xml标签上风格里,然后也能进行处理,如px2rem能将px转rem,是否在风格上写也能实现。
/
我们在webpack。(js | jsx) & # 63;美元/这样babel-loader之前(webpack从右往左)加一个加载器把需要转变的px进行替换,不就好了,先找找有没有这样的装载机,我找了下没找的到,只能自己写一个了
const loaderUtils=要求(“loader-utils”);//默认参数
const defaultopts={
remUnit: 100//rem单位值(默认值:100)
remFixed: 2//rem值精度(默认值:2)
};//获取webpack配置好的参数
const选择=loaderUtils.getOptions(这个);//将参数组合
常量配置=对象。分配({},defaultopts选择);
const ZPXRegExp=/\ b (\ d + (\ \ d +) & # 63;) SUPX \ b/;
模块。出口=function(源){
让pxGlobalRegExp=新的正则表达式(ZPXRegExp。源,“g”);
如果(this.cacheable) {
this.cacheable ();
}//先测试下有没有符合的如果有再进行替换
如果(pxGlobalRegExp.test(源)){
返回源。替换(pxGlobalRegExp,(0, 1)美元=比;{
让val=1美元/config.remUnit;//精确到几位
val=parseFloat (val.toFixed (config.remFixed));
返回val===0 & # 63;瓦尔:val +“快速眼动”;
});
其他}{
返回源;
}
};
之前
用法
{
装载机:路径。加入(rootPath '加载器/jsxPx2RemLoader '),
选择:{
remUnit: 100,
remFixed: 3
}
}
之前
源码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
