摘要:但是,標簽內的怎么辦呢并不提供轉換這個的功能。開始行動了解的實現原理寫一個很簡單,傳入,干些壞事,干完之后,返回處理過的。對應的是每一個通過匹配到的文件。其實對應的就是這樣一個文件,該例子中有是需要轉換的目標,首先用正則把他們都找出來。
需求
自從有了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部分,、