首先,我们需要安装相关的插件: npm install postcss-px-to-viewport -D 在vite.config.js文件中进行配置 importvuefrom'@vitejs/plugin-vue'// vite.config.tsimport{ defineConfig }from'vite'importAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{ElementPlusRe...
2.在vite.config.ts中添加配置 第一种配置: import pxtovw from 'postcss-px-to-viewport'const loder_pxtovw = pxtovw({//这里是设计稿宽度 自己修改viewportWidth: 1920, viewportUnit: 'vw'})exportdefaultdefineConfig({ plugins: [vue()],css: { postcss: { plugins: [loder_pxtovw] } }}) ...
启动Vite开发服务器,并检查生成的CSS文件,你应该会看到原来的px单位已经被转换为vw单位。 通过上述步骤,你已经成功在Vue 3+Vite项目中集成了postcss-px-to-viewport插件,并实现了px到viewport单位的自动转换。
vue3使用postcss-px-to-viewport 附带vite配置 postcss-px-to-viewport做前端自适应,适用于pc和移动 注意⚠️: 1、直接在dom元素上使用 style 是不会被转换的 2、用类选择器、id选择器等才会被转换 3、element-ui、vant-ui 等UI组件库 默认会被转换 1.下载 postcss-px-to-viewport 插件 npm i postcss-...
vue3 + vit..求求各位大佬们帮帮我解惑,我在使用vue3 + vite 构建的项目中使用了postcss-px-to-viewport,图片中两行代码,控制台报错[plugin:vite:css] Failed t
vue3+vite项目配置适配H5主要安装一下两个插件: amfe-flexible(主要用于动态设置根元素字体大小(rem),以根据屏幕尺寸进行自适应布局) postcss-px-to-viewport-8-plugin(将px单位转换为rem) 开始配置: 第一步、安装amfe-flexible插件 cnpm install amfe-flexible --save ...
安装完 postcss-px-to-viewport 插件后,按照之前vue-cli项目的方式,src目录下新建 postcss.config.js 文件并进行规则配置。运行起来并未报错,但是发现px并...
2.在vite.config.js导入 import postcssPxToViewport from 'postcss-px-to-viewport'; 1. 3.增加css配置,示例如下 return defineConfig({ plugins: [vue(), buildTimePlugin(mode)], build: { outDir: dist, }, resolve: { alias: { "@": path.resolve(__dirname, "./src"), ...
vite.config.js文件配置 import{defineConfig,loadEnv}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom'path'importpostcsspxtoviewport8pluginfrom'postcss-px-to-viewport-8-plugin';constresolve=str=>path.resolve(__dirname,str)exportdefaultdefineConfig(({mode})=>{constENV=loadEnv(mode,__dirnam...
为提高页面的兼容性,可使用postcss-px-to-viewport。 1.安装依赖 "postcss-px-to-viewport":"^1.1.1" 2.在vite.config.js导入 import postcssPxToViewport from 'postcss-px-to-viewport'; 3.增加css配置,示例如下 returndefineConfig({ plugins: [vue(), buildTimePlugin(mode)], ...