kidArtExpo/postcss.config.js

import autoprefixer from 'autoprefixer';
import postcssResponsiveType from 'postcss-responsive-type';
import pxToViewport from 'postcss-px-to-viewport';
import tailwindcss from 'tailwindcss';
// 使用新的PostCSS 8 API创建自定义的px-to-viewport插件
const customPxToViewportPlugin = (options) => {
    return {
        postcssPlugin: 'custom-px-to-viewport',
        Once(root, { result }) {
            const file = result.opts.from;
            let viewportWidth = '';
            if (file?.includes('vant')) {
                viewportWidth = 375;
            }
            if (file.includes('src/views')) {
                viewportWidth = 1920;
            }
            const pxToViewportInstance = pxToViewport({
                ...options,
                viewportWidth: viewportWidth,
            });

            if (file) {
                pxToViewportInstance(root, result);
            }
        }
    };
};

// 定义postcss插件名称
customPxToViewportPlugin.postcss = true;

export default {
    plugins: [
        tailwindcss(),
        autoprefixer(), // 自动添加浏览器前缀
        postcssResponsiveType(), // 自动调整文本大小
        customPxToViewportPlugin({
            unitPrecision: 10, // 保留的小数位数
            selectorBlackList: [/^\.van/], // 以 .van 开头的类名不转换
            minPixelValue: 1, // 小于或等于 1px 不转换
            mediaQuery: false, // 允许在媒体查询中转换 px
            viewportUnit: "vw", // 转换后的单位
            fontViewportUnit: "vw", // 字体单位
            unitToConvert: "px" // 需要转换的单位
        }),
    ],
};