vue3 + vite px转rem

最新推荐文章于 2024-09-06 14:26:03 发布

JJJJJJJJXY

最新推荐文章于 2024-09-06 14:26:03 发布

阅读量400

点赞数 2

文章标签： vue.js javascript typescript scss css3

本文链接：https://blog.csdn.net/JJJJJJJJXY/article/details/137682235

版权

本文介绍了如何在Vue3项目中使用Vite和postcss-pxtorem插件将设计稿上的px单位转换为rem，同时结合amfe-flexible确保响应式设计。配置包括设置根值、转换属性和选择器规则。

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

vue3 + vite px转rem

npm install postcss-pxtorem amfe-flexible --save-dev

在vite.config.js中添加代码：

import pxtorem from 'postcss-pxtorem'
// ...若干代码
 css: {
      postcss: {
        plugins: [
          pxtorem({
          	// 设计稿宽度的1/10，通常是750的1/10
            rootValue: 192, 
            // 需要转换的属性，除 border 外所有px 转 rem
            propList: ['*', "!border"], 
            // 要忽略的选择器
            selectorBlackList: ['van'], 
            replace: true, // 直接更换成rem
            mediaQuery: false, // 是否要在媒体查询中转换px
            minPixelValue: 2 // 设置要转换的最小像素值
          })
        ]
      }
    }