@moohng/postcss-px2vw 是一个将 px 转换为 vw(视窗宽度单位)的 PostCSS 插件,用于响应式布局设计。配置它可以帮助你将设计稿中的像素值转化为基于视窗宽度的值,从而更好地适应不同屏幕尺寸。
下面是一个典型的 postcss.config.js 配置示例,包含了 @moohng/postcss-px2vw 的配置:
module.exports = {plugins: {'@moohng/postcss-px2vw': {viewportWidth: 1920, // 设计稿的视窗宽度,可以设置为1920或其他基于设计稿的宽度viewportUnit: 'vw', // 转换的单位,这里是 'vw'minPixelValue: 1, // 最小的像素值,如果小于这个值,则不进行转换unitPrecision: 3, // 转换精度,保留几位小数selectorBlackList: [], // 忽略转换的选择器,填入class或ID等exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略 node_modules 里的文件},},
};