vite配置postcss

时间:2025-05-12 19:48:24

1.搭建项目

pnpm create vite

2.下载postcss

pnpm i postcss
pnpm i postcss-pxtorem 
pnpm i autoprefixer

        也可以去官网找其他插件下载

3.配置

import postCssPxToRem from 'postcss-pxtorem'
import autoprefixer from 'autoprefixer'
 
export default () => {
    return {
        css: {
            postcss: { 
                plugins: [
                    postCssPxToRem({ // 自适应,px>rem转换
                        rootValue: 16, // 1rem的大小
                        propList: ['*'], // 需要转换的属性,这里选择全部都进行转换
                    }),
                    autoprefixer({ // 自动添加前缀
                        overrideBrowserslist: [
                            "Android 4.1",
                            "iOS 7.1",
                            "Chrome > 31",
                            "ff > 31",
                            "ie >= 8"
                        ],
                    })
                ]
            },
        }
    };
}

参考:

/J84pt