插件详解

postcss-px-to-viewport-8-plugin

需要配合 postcss8 使用

把px转换为 rem vw的插件

export default {
    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {
        postcss: {
            // 使用px2vw插件
            // 添加插件名称作为键，参数作为值
            plugins: {
                "postcss-px-to-viewport-8-plugin": {
                    unitToConvert: "px", // 默认值`px`，需要转换的单位
                    viewportWidth: 375, // 视窗的宽度,对应设计稿宽度
                    viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
                    unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
                    propList: ["*"], // 转化为vw的属性列表
                    viewportUnit: "vw", // 指定需要转换成视窗单位
                    fontViewportUnit: "vw", // 字体使用的视窗单位
                    selectorBlaskList: ["ignore-"], // 指定不需要转换为视窗单位的类，含有'ignore-'的类都不会被转换
                    mediaQuery: false, // 允许在媒体查询中转换`px`
                    minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位
                    replace: true, // 是否直接更换属性值而不添加备用属性
                    // exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件
                    // include: [/pages/,/assets/,/components/,/static/,/vant/], // 如果设置了include，那将只有匹配到的文件才会被转换
                    landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
                    landscapeUnit: "vw", // 横屏时使用的单位
                    landscapeWidth: 1338 // 横屏时使用的视窗宽度
                },
                // tailwindcss: join(__dirname, 'tailwind.config.js'),
                // autoprefixer: {}
            },
            preset: {
                // 更改postcss-preset-env 设置
                autoprefixer: {}
            }
        }

    }
}