2024-09-21 在vite中配置postcss2rem

备注一下,网上好多帖子是抄的

  1. 下载依赖,我的版本
    "postcss-plugin-px2rem": "^0.8.1",
    "autoprefixer": "^10.4.20",

  2. 在vite.config.js配置

import postcssPluginPx2rem from "postcss-plugin-px2rem"; //引入插件

//配置参数
const px2remOptions = {
    rootValue: 16,  //换算基数, 默认100 ,也就是1440px ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了
    unitPrecision: 5, //允许REM单位增长到的十进制数字,其实就是精度控制
    mediaQuery: false, //(布尔值)允许在媒体查询中转换px
    minPixelValue: 0  //设置要替换的最小像素值(3px会被转rem)。 默认 0
}



//--在配置中css下,加入插件
css: {
            postcss: {
                plugins: [
                   // 加入rem配置项
                    postcssPluginPx2rem(px2remOptions)
                ]
            }
        }
  1. 重启即可完成

postcss2rem 配置项很多网上博客都有,可以参考,基本很少有变动

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。