postcss-pxtorem中的rootValue返回值没有生效问题

最新推荐文章于 2024-09-13 22:04:24 发布

Lysun001

最新推荐文章于 2024-09-13 22:04:24 发布

阅读量1.1k

点赞数 9

文章标签： postcss 前端 javascript

本文链接：https://blog.csdn.net/lotpyve/article/details/135225648

版权

文章讲述了在使用vant组件时，rem单位的适配问题，发现非vant组件的1rem默认为75px，而vant组件下的1rem为37.5px。通过检查postcss.config.js配置，发现问题是由于文件路径包含vant导致判断错误。解决方法是修改文件路径以确保正确识别组件类型。

摘要由CSDN通过智能技术生成

在vant官网中，我看见这么一个关于 rem 适配的声明

也就是说，1rem 等于十分之一的屏幕宽度，如果使用的是 vant 组件，则 1rem = 37.5px，如果使用的不是 vant 组件的样式，那么 1rem = 75px

那么此时我在 App.vue 中这么写

<script setup>
</script>

<template>
  <van-button type="primary">主要按钮</van-button>
  <van-button type="success">成功按钮</van-button>
  <van-button type="default">默认按钮</van-button>
  <van-button type="warning">警告按钮</van-button>
  <van-button type="danger">危险按钮</van-button>
  <div class="box">123</div>
</template>

<style scoped>
.box{
  background-color: pink;
  width: 750px;
  height: 200px;
}
</style>

按理说，.box 的 div 标签不是 vant 组件，所以他的 1rem 等于 75px，这里给他 width 定义的是 750px，应该恰好等于 10rem，恰好是整个屏幕的宽度才对

可是结果并不如意，我在浏览器中看，他的 width 是 20rem

这就很困惑我了，难道是 postcss.config.js 配置文件没生效吗，可是如果我把 postcss.config.js 配置文件中的返回结果换一下，改成 return file.indexOf('vant') !== -1 ? 75 : 37.5;，然后在重新启动，这样的话他是生效的啊，那么只有一种结果，就是 file.indexOf('vant') !== -1 一直都是为 true

最后找到了我的问题所在，他这里接受的参数 file 是路径，所以如果我们的项目路径有 vant 的字符，他的 file.indexOf('vant') !== -1 就一直是 true，达不到我们想要的结果

解决办法，修改文件路径，包括文件夹和文件名

我们可以在配置文件中 console.log() 输出验证我们的想法

// postcss.config.js
module.exports = {
    plugins: {
      // postcss-pxtorem 插件的版本需要 >= 5.0.0
      'postcss-pxtorem': {
        rootValue({ file }) {
          console.log(file,file.indexOf('vant') !== -1,"000");
          return file.indexOf('vant') !== -1 ? 37.5 : 75;
        },
        propList: ['*'],
      },
    },
  };