sonofmagic / uni-app-vite-vue3-tailwind-vscode-template

uni-app vue3 tailwindcss 模板,集成了 iconify,eslint,typescript,prettier 等等工具作为解决方案
https://uni-app-tw.netlify.app/
MIT License
188 stars 27 forks source link

怎么启用rpx 转px #24

Open Rika-L opened 5 days ago

Rika-L commented 5 days ago

如题,官网的教程是基于cjs引入postcss-pxtransform的,现在用esm怎么引入

sonofmagic commented 5 days ago

好问题,现在这个项目实际上可以直接引入,因为这个 uni-app 项目实际上是直接在 vite.config.ts 里面内联的 postcss 插件,外面放个 postcss.config.ts 只是摆设而已。

你可以试试直接 import 或者 require, vite.config.ts 应该是做了这 2 种格式的处理的.

Rika-L commented 5 days ago

谢谢,这样写就可以了,之前没有类型提示,原来是用于测试的盒子宽高不相等

import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import type {AcceptedPlugin} from 'postcss'
import cssMacro from 'weapp-tailwindcss/css-macro/postcss'
import postcssPxtransform from 'postcss-pxtransform';

const plugins: AcceptedPlugin[] = [
  tailwindcss(), 
  autoprefixer(), 
  postcssPxtransform({platform: 'weapp', designWidth: 750})
]

plugins.push(cssMacro)

export default plugins

,顺带一提我也遇到了issues19相同问题,真机测试会爆红,不知道会不会对日后生产环境有影响