摘要:但是,标签内的怎么办呢并不提供转换这个的功能。开始行动了解的实现原理写一个很简单,传入,干些坏事,干完之后,返回处理过的。对应的是每一个通过匹配到的文件。其实对应的就是这样一个文件,该例子中有是需要转换的目标,首先用正则把他们都找出来。
需求
自从有了postcss来处理css文件,我们可以快速进行网站适配的开发,只需要改改参数,样式按照设计稿的px写,webpack编译自动转换成rem或者vw等。
但是,标签内的px怎么办呢?postcss并不提供转换这个的功能。
探索 启动思路我正在做一个vue项目,刚好想要实现上面提到的需求,例如下面的例子
Test
我希望他能根据我设置的基准值自动转换成vw。
Test
要想实现这样一个东西,离不开编译工具webpack,webpack有loader、plugin,用什么好呢?通过找资料,我从一篇px转rem的文章中得到了提示 react内联样式使用webpack将px转rem
没错,就是webpack-loader写一个webpack loader,在webpack编译阶段,读取vue文件里面的内容,通过正则识别出需要转换的像素px,再通过公式转换成vw。
开始行动1、了解loader的实现原理
写一个loader很简单,传入source,干些坏事,干完之后,返回处理过的source。source对应的是每一个通过loader匹配到的文件。
module.exports = function (source) { // 干些坏事 return source }
2、如何让loader干坏事 我们知道
先看一个简单的vue文件,通常分为3部分,、