Vite构建的Vue3移动端项目使用postcss-px-to-viewport

前端狗哥

已于 2023-09-12 15:11:28 修改

阅读量1.3k

点赞数 1

文章标签： postcss 前端 javascript

于 2023-09-12 09:47:33 首次发布

本文链接：https://blog.csdn.net/weixin_44023357/article/details/132824131

版权

在以往我们使用vue-cli构建的项目中，通常使用postcss-px-to-viewport这个库把px转为vw做不同设备的兼容，兼容方法也很简单，npm i postcss-px-to-viewport安卓依赖，在根目录新建 .postcssrc.js（优先级高）或者 postcss.config.js，重启项目即可实现px转vw。

如果我们使用vite构建项目或者使用vue@latest创建项目，在根目录新建 .postcssrc.js（优先级高）或者 postcss.config.js就会报错。解决方案如下

在vite.config.js文件中

import { fileURLToPath, URL } from 'node:url'
import postcsspxtoviewport from 'postcss-px-to-viewport'
// import Components from 'unplugin-vue-components/vite';
// import { VantResolver } from '@vant/auto-import-resolver';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [
    vue(),
    // 解析模板自动注册vant组件
    // Components({
    //  resolvers: [VantResolver()],
    // }),
  ],
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px',
          viewportWidth: 375,
          unitPrecision: 6,
          propList: ['*'],
          viewportUnit: 'vw',
          fontViewportUnit: 'vw',
          selectorBlackList: ['ignore-'],
          minPixelValue: 1,
          mediaQuery: false,
          replace: true,
          exclude: [/^(?!.*node_modules\/vant)/],
          landscape: false
        }),
        postcsspxtoviewport({
          // 要转化的单位
          unitToConvert: 'px',
          // UI设计稿的大小
          viewportWidth: 750,
          // 转换后的精度
          unitPrecision: 6,
          // 转换后的单位
          viewportUnit: 'vw',
          // 字条转换后的单位
          fontViewportUnit: 'vw',
          // 能转换的属性，*表示所有属性，!border表示border不转
          propList: ['*'],
          // 指定不转换为视窗单位的类名，
          selectorBlackList: ['ignore-'],
          // 最小转换的值，小于等于1不转
          minPixelValue: 1,
          // 是否在媒体查询的css代码中也进行转换，默认false
          mediaQuery: false,
          // 是否转换后直接更换属性值
          replace: true,
          // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
          exclude: [],
          // 包含那些文件或者特定文件
          include: [],
          // 是否处理横屏情况
          landscape: false
        }),
      ]
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})