背景：

现在我们开发代码css代码时，需要将设计图的px转换成rem，实现自适应。

现阶段实施方案：

方案1：

使用vscode插件pxtorem, 在750的设计图的面前，我们需要将pxtorem 的插件设置成为rootsize设置成为37.5px，在640图的面前需要把插件的rootSize 设置为32px。

缺点：

1. 这个过程很容易遗忘。导致设计图像素对不准。
2. px装成rem 后，不知道原来的px是什么了，需要手动加入注释。

方案2:

为了解决这个痛点，我们从新开发vscode插件，vscode 自动加入注释，在头部增加/ui640ui/注释，可以自定识别转换px->rem。

缺点：

1.有时候代码没敲完，注释就出来了。

2.修改单位时候会不停的出现注释,需要手动删除。

3.安装这个插件的时候，vscode莫名的崩溃（我的电脑）。

最终版方案：

以上的两种方案都有缺点，在思考有没有更加优秀的方案。

思路：结合最近学习的知识ast，和vuepess的设计理念。想到我们在每个less文件的头部增加一个（类json的东西,听以前别人提到过称之为json5），通过webpack打包前对于less的预编辑过程，导入一个loader,处理less。对less文件进行转换。使得我们源码开发的是px，打包过后的是rem。

可以解决问题：

1. 不需要在每个px单位后面加入注释，
2. 解决我们750，和640两个设计图的问题，（不用来回切换）

完成插件：high-pxtorem