[vite] 带看文档配置postcss-pxtorem

npm: postcss-pxtorem - npm

github:GitHub - cuth/postcss-pxtorem: Convert pixel units to rem (root em) units using PostCSS

 

他说这是PostCSS 插件，可从像素单位生成 rem 单位。 

既然是插件,看vite共享选项 | Vite 官方中文文档

图里提到PostCSS 是个插件(图一),vite官网写着插件要用数组格式

 所以配置大概是这样 

点进看看 刚刚的文档的数组格式(图二)看看postcss-load-config/README.md at main · postcss/postcss-load-config · GitHub

 参考一下插件文档

所以配置好是这个样子的

import { fileURLToPath, URL } from 'node:url'

import pxtorem from 'postcss-pxtorem'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  css: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 37.5,
           propList: ["*"]
        })
      ]
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

我只配了一个属性,你想具体就去看github文档 

---

---

 ts报错无法找到postcss-pxtorem模块类型声明

下载类型文件 

@types/postcss-pxtorem - npm

安装就行

npm install --save @types/postcss-pxtorem