關(guān)于vite項(xiàng)目postcss-px-to-viewport適配vant的問題，網(wǎng)上很多文章都已經(jīng)過時(shí)或者都是基于webpack的配置，很少vite相關(guān)的配置教程，故做一下筆記希望幫到正在踩坑的同學(xué)。

postcss-px-to-viewport插件已經(jīng)拋棄使用請(qǐng)使用postcss-px-to-viewport-8-plugin

（項(xiàng)目運(yùn)行時(shí)會(huì)提示已棄用）

已經(jīng)安裝postcss-px-to-viewport先刪除 npm uninstall?postcss-px-to-viewpor

刪除項(xiàng)目postcss.config.js

重點(diǎn)是postcss里面的配置，其他配置項(xiàng)可以忽略文章來源地址http://www.zghlxwxcb.cn/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預(yù)處理器
    preprocessorOptions: {
      scss: {
        // 給導(dǎo)入的路徑最后加上 ;
        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, // 單位轉(zhuǎn)換后保留的精度
          propList: ['*'], // 能轉(zhuǎn)化為vw的屬性列表
          viewportUnit: 'vw', // 希望使用的視口單位
          fontViewportUnit: 'vw', // 字體使用的視口單位
          selectorBlackList: ['ignore-'], // 需要忽略的CSS選擇器，不會(huì)轉(zhuǎn)為視口單位，使用原有的px等單位。
          minPixelValue: 1, // 設(shè)置最小的轉(zhuǎn)換數(shù)值，如果為1的話，只有大于1的值會(huì)被轉(zhuǎn)換
          mediaQuery: true, // 媒體查詢里的單位是否需要轉(zhuǎn)換單位
          replace: true, //  是否直接更換屬性值，而不添加備用屬性
          exclude: [], // 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
          include: [], // 如果設(shè)置了include，那將只有匹配到的文件才會(huì)被轉(zhuǎn)換
          landscape: false, // 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
          landscapeUnit: 'vw', // 橫屏?xí)r使用的單位
          landscapeWidth: 1628, // 橫屏?xí)r使用的視口寬度
        }),
      ],
    },
  }
})

到了這里，關(guān)于vite項(xiàng)目 postcss-px-to-viewport適配vant的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！