vue3 使用postcss-px-to-viewport
时间: 2023-11-04 10:58:24 浏览: 120
关于vue利用postcss-pxtorem进行移动端适配的问题
5星 · 资源好评率100%
在Vue3中使用postcss-px-to-viewport插件,你可以按照以下步骤进行配置:
1. 通过npm安装postcss-px-to-viewport插件:`npm i postcss-px-to-viewport`
2. 在vite.config.ts文件中添加配置,引入postcss-px-to-viewport插件,并进行相关参数的设置:
```javascript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import pxtovw from 'postcss-px-to-viewport';
const loader_pxtovw = pxtovw({
// 设计稿的宽度,根据实际情况进行修改
viewportWidth: 1920,
viewportUnit: 'vw'
});
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [loader_pxtovw]
}
},
resolve: {
alias: {
'@': resolve('./src')
}
},
base: './', // 打包路径
server: {
port: 4000, // 服务端口号
open: true, // 服务启动时是否自动打开浏览器
cors: true // 允许跨域
}
});
```
这样,你就成功配置了Vue3项目使用postcss-px-to-viewport插件进行px单位转换为vw单位。
阅读全文