关于javascript:postcsspxtoviewport在Vite中如何配置

我的项目形容：

vite + vue3 + ts 挪动端

问题形容：

装置完 postcss-px-to-viewport 插件后，依照之前 vue-cli 我的项目的形式，src 目录下新建 postcss.config.js 文件并进行规定配置。运行起来并未报错，然而发现 px 并没有转换为 vw 单位。

问题解决：

因为 vite 中曾经内联了 postcss，所以并不需要额定的创立 postcss.config.js 文件，vite 对于 css.postcss 咱们只须要在 vite.config.ts 中进行配置即可：具体配置如下:

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import postcsspxtoviewport from 'postcss-px-to-viewport'

export default defineConfig({
  plugins: [vue()
  ],
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px', // 要转化的单位
          viewportWidth: 750, // UI 设计稿的宽度
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ['*'], // 指定转换的 css 属性的单位，* 代表全副 css 属性的单位都进行转换
          viewportUnit: 'vw', // 指定须要转换成的视窗单位，默认 vw
          fontViewportUnit: 'vw', // 指定字体须要转换成的视窗单位，默认 vw
          selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值 1，小于或等于 1px 则不进行转换
          mediaQuery: true, // 是否在媒体查问的 css 代码中也进行转换，默认 false
          replace: true, // 是否转换后间接更换属性值
          // exclude: [/node_modules/], // 设置疏忽文件，用正则做目录名匹配
          exclude: [],
          landscape: false // 是否解决横屏状况
        })
      ]
    }
  }
})

实现后重启我的项目就能够看到 px 转换为 vw 单位了。

感激这篇文章的参考 ：vite postcss