module.exports = ({file}) => {
    return {
        plugins: {
            // 兼容浏览器，添加前缀
            autoprefixer: {
                overrideBrowserslist: [
                    "Android 4.1",
                    "iOS 7.1",
                    "Chrome > 31",
                    "ff > 31",
                    "ie >= 8",
                    "last 4 versions", // 所有主流浏览器最近4个版本
                ],
                // grid: true,
            },
            // 移动端解决方案 amfe-flexible postcss-pxtorem的使用 参考https://blog.csdn.net/weixin_43242112/article/details/112193205
            // 在vue单文件中，包含在style内的px单位会自动转换成rem，但是行内样式中的px单位不会转换成rem
            // 'postcss-pxtorem': {
            //   /* 1、在上面就提到过，lib-flexible最终转换html元素的font-size是手机屏幕的十分之一，所以这个rootValue的值是根据我们的设计稿来设置的。
            //   2、由于我的设计稿是通过iphone6做为原型设计的，宽度是375，所以在这里我rootValue的值为37.5。
            //   3、如果你的设计稿宽度是750，那么rootValue的值为75。
            //   4、如果你使用的UI库是Vant，那么这个rootValue的值就必须设置为37.5，因为 Vant 是基于逻辑像素 375 写的，所以如果你设置为 75 的话，Vant 的样式就小了一半。
            //   5、如果设计稿就是750，我们在测量设计稿的时候都必须除2才能使用，否则就会变得很大。不想除就找UI把设计图变成0.5倍图，也就是宽为375。 */
            //   rootValue: 136.6, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
            //   /**
            //    * 是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']:
            //      * 属性必须完成匹配。比如height，width
            //      * 使用通配符 * 启用所有属性。[‘*’]
            //      * 在单词的开头或结尾使用 *来匹配。比如[“*positons*”,“*height”]会匹配到background-position-y和min-height、max-height
            //      * 使用！不匹配属性。比如 [“!height”] 就不会转换height
            //      * 可以将！和* 结合使用。比如 [“!font*”] font-size将不会转换
            //    */
            //   propList: ["*"],
            //   unitPrecision: 5, //保留rem小数点多少位
            //   // selectorBlackList: ['.el'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
            //   replace: true, //类型为布尔值 替换包含 rems 的规则，而不是添加回退。
            //   mediaQuery: false, //允许在媒体查询中转换`px`,false即媒体查询( @media screen 之类的)中不生效
            //   // minPixelValue : 12,//类型为数字 设置要替换的最小像素值,px小于12的不会被转换
            //   // exclude：/ node_modules / i  //类型为字符串或正则表达式或函数 要忽略并保留为 px 的文件路径。
            // },

            'postcss-px-to-viewport-8-plugin': {
                unitToConvert: 'px', // 要转化的单位
                viewportWidth: 1366, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750  file.includes('vant') ? 375 : 750
                // viewportHeight: 812, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
                unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数
                propList: ["*"],
                viewportUnit: 'vw', //指定需要转换成的视窗单位， vw,vh,vmin建议使用vw
                selectorBlackList: [], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
                minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
                mediaQuery: false // 允许在媒体查询中转换`px`
            }
        },
    }
};