postcss-px2vp 使用教程

最新推荐文章于 2024-09-12 07:44:56 发布

THyo

最新推荐文章于 2024-09-12 07:44:56 发布

阅读量314

点赞数

文章标签： postcss 前端 javascript

本文链接：https://blog.csdn.net/thyoyoyo/article/details/133377234

版权

安装插件

npm install postcss-px2vp --save-dev
npm install postcss-preset-env --save-dev

创建配置文件 postcss.config.cjs

module.exports = {
  map: "inline",
  plugins: {
    "postcss-preset-env": {},
    "postcss-px2vp": {
      viewportWidth(rule) {
        const file = rule.source?.input.file;
        if (file?.includes("vant")) return 375; 
        return 375; //设计图尺寸
      },
      unitPrecision: 6, //指定转换后的视窗单位保留小数点的位数
      mediaQuery: true,//将媒体查询中的像素单位也转换为视窗单位。
      minPixelValue: 1,//指定在转换时忽略小于 1 像素的值。
      propList: ["*"],//转换的属性列表，此处包括所有属性。
      selectorBlackList: ["ignore", /vant.*!/],//要排除的选择器列表，例如，这里排除了选择器中包含 "ignore" 或以 "vant" 开头的选择器。
    },
  },
};