vite项目 postcss-px-to-viewport适配vant

这篇具有很好参考价值的文章主要介绍了vite项目 postcss-px-to-viewport适配vant。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

关于vite项目postcss-px-to-viewport适配vant的问题,网上很多文章都已经过时或者都是基于webpack的配置,很少vite相关的配置教程,故做一下笔记希望帮到正在踩坑的同学。

postcss-px-to-viewport插件已经抛弃使用请使用postcss-px-to-viewport-8-plugin

(项目运行时会提示已弃用)

已经安装postcss-px-to-viewport先删除 npm uninstall postcss-px-to-viewpor

删除项目postcss.config.js

重点是postcss里面的配置,其他配置项可以忽略文章来源地址https://www.toymoban.com/news/detail-649967.html

1.按照依赖
npm install postcss-px-to-viewport-8-plugin -D

2.vite.config.js配置如下

import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin';

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server:{
    host: '0.0.0.0',
  },
  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 给导入的路径最后加上 ;
        additionalData: '@import "@/style/pxToVw.scss";'
      }
    },
    postcss: {
      plugins: [
        postcsspxtoviewport8plugin({
          unitToConvert: 'px',
          viewportWidth: file => {
            let num = 750;
            //van是375
            if (file.indexOf('van')>0) {
              num = 375;
            }
            return num;
          },
          unitPrecision: 5, // 单位转换后保留的精度
          propList: ['*'], // 能转化为vw的属性列表
          viewportUnit: 'vw', // 希望使用的视口单位
          fontViewportUnit: 'vw', // 字体使用的视口单位
          selectorBlackList: ['ignore-'], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
          minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
          mediaQuery: true, // 媒体查询里的单位是否需要转换单位
          replace: true, //  是否直接更换属性值,而不添加备用属性
          exclude: [], // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
          include: [], // 如果设置了include,那将只有匹配到的文件才会被转换
          landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
          landscapeUnit: 'vw', // 横屏时使用的单位
          landscapeWidth: 1628, // 横屏时使用的视口宽度
        }),
      ],
    },
  }
})

到了这里,关于vite项目 postcss-px-to-viewport适配vant的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序适配问题 移动端适配方案 viewport

    iPhone X 兼容 在小程序页面开发中,涉及到需要适配 iPhone X 的地方主要有:导航栏(NavigationBar),标签栏(TabBar)以及页面底部的吸底按钮。 对于position: fixed的可交互组件,如果渲染在iPhone X的安全区域外,容易误触 Home Indicator,应当把可交互的部分都渲染到安全区域内。

    2024年02月12日
    浏览(44)
  • postcss插件使用和适配方案

    使用 postcss-px-to-viewport 插件解决移动端的适配方案。 原理是将固定的像素单位(px)转换为根据视窗大小缩放的单位(vw|vh),该插件实现的就是这一单位间的转化。 参考网址: postcss-px-to-viewport 中文文档: https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md 该项目使用vue3+

    2024年02月09日
    浏览(32)
  • vite配置postcss-autoprefixer,实现自动添加css属性前缀

    vite: 4.1.4 首先去vite官网逛逛,因为autoprefixer属于postcss类,所以在官网的配置共享配置中找到关于css.postcss配置项 发现vite对于postcss有两种不同的配置方式:1.内联配置 2.开发者使用postcss-load-config插件推荐的配置方法(vite内置了postcss-load-config插件)具体怎么配置可以看插件官

    2024年02月07日
    浏览(84)
  • Android屏幕适配dp、px两套解决办法

    最新最全文章(2018-08-25):Android dp方式的屏幕适配-原理(后期补充完整讲解)_手机dp输出是横屏还是竖屏_android阿杜的博客-CSDN博客 “又是屏幕适配,这类文章网上不是很多了吗?” 我也很遗憾,确实又是老问题。但本文重点对网上的各种方案做一个简短的总结,和具体使用方法

    2023年04月22日
    浏览(38)
  • postcss-pxtorem适配插件动态配置rootValue(根据文件路径名称,动态改变vue.config里配置的值)

    项目背景:一个项目里有两个分辨率的设计稿(1920和2400),不能拆开来打包 参考: 是参考vant插件:移动端Vant组件库rem适配下大小异常的解决方案:https://github.com/youzan/vant/issues/1181 说明: 因为 vue.config.js 文件无法获取window对象,所以任何外部参数都加不进来,甚至无法打印

    2024年02月14日
    浏览(45)
  • Vue中使px自动转rem配置 (h5适配问题)

    以下方法为px自动转换rem,顾名思义,配置完成后,不用再关心rem换算等等,只需按照设计稿的px值写入即可,当你保存后 PostCSS 插件会自动将px转换成所配置的rem值,并且你在浏览控制台观测界面时你会发现你在代码里写的是px单位,在控制台被转换成了rem单位。 postcss 一种

    2024年01月22日
    浏览(73)
  • vite项目在jenkins自动打包报错:failed to load config from ../vite.config.js You installed esbuild on

    在window环境开发用的找不到 esbuild-windows-64 ,在linux环境构建需要使用 esbuild-linux-64 ,找不到 esbuild-linux-64 就会报错 实际报错: 报错原因: vite在linux环境打找不到 esbuild-linux-64 2种解决方案: 1、在linux环境下,打包前先 npm i esbuild-linux-64 2、在外网windows环境下运行以下命令(

    2024年02月13日
    浏览(61)
  • vite+vue3运行项目报错failed to load config from ../vite.config.ts / Cannot find module ‘node:path‘

    运行vite+vue3项目时报错: failed to load config from …/vite.config.ts error when starting dev server: Error: Cannot find module ‘node:path’ Require stack: /Users/list/Downloads/Admin-master/node_modules/vite/dist/node-cjs/publicUtils.cjs 百度了发现是node版本不够,于是去升级node到16版本 1.清除npm缓存: 2.安装node版本管

    2024年02月05日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包