vite px 自动转rem

vite  px 自动转rem

 

1、插件安装

npm i   @types/postcss-pxtorem
npm i    amfe-flexible
npm i   postcss-pxtorem

2、main.ts引入

import "amfe-flexible";

3、去掉报错问题 shim.d.ts  添加

declare module 'amfe-flexible';
declare module 'postcss-pxtorem';

4、vite.config.ts 引入

import postcssPxtoRem from 'postcss-pxtorem'


css: {
    postcss: {
        plugins: [
                      postcssPxtoRem({
                          rootValue: 192, // 按照自己的设计稿修改 1920/10
                          propList: ['*'],
                       }),
                 ]               
            }
}

 

重启

参考文档：

https://www.npmjs.com/package/postcss-pxtorem