首先,我们需要安装相关的插件: 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'
1.下载 postcss-px-to-viewport 插件 npm i postcss-px-to-viewport --save-dev 2.在vite.config.ts中添加配置 第一种配置: import pxtovw from 'postcss-px-to-viewport' const loder_pxtovw = pxtovw({ //这里是设计稿宽度 自己修改 viewportWidth: 1920, viewportUnit: 'vw' }) export default defin...
在Vue3项目中使用postcss-px-to-viewport插件可以帮助你将CSS中的px单位转换为基于视口(viewport)的单位,如vw或vh,这对于响应式设计非常有用。以下是根据您的提示,逐步说明如何在Vue3项目中配置和使用postcss-px-to-viewport: 1. 安装postcss-px-to-viewport插件 首先,您需要在Vue3项目中安装postcss-px-to-viewpor...
plugins: {'postcss-px-to-viewport': { viewportWidth:750,// 设计稿的宽度viewportHeight:1334,// 设计稿的高度unitPrecision:5,// 转换后的单位精度viewportUnit:'vw',// 转换后的单位selectorBlackList: ['.ignore','.hairlines'],// 不转换的类名minPixelValue:1,// 最小转换值mediaQuery:false,// ...
viewportUnit: 'vw' }) export default defineConfig({ plugins: [vue()], css: { postcss: { plugins: [loder_pxtovw] } } }) 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 第二种配置: postcss: { plugins: [ require("postcss-px-to-viewport")({ ...
px-to-viewport,图片中两行代码,控制台报错[plugin:vite:css] Failed to load PostCSS config (searchPath: E:/xsd/myproject-vue3): [Error] Loading PostCSS Plugin failed: Cannot find module 'postcss-plugin-dynamic-viewport'Require stack:- E:\xsd\myproject-vue3\postcss.config.js(@E:\xsd\my...
selectorBlackList: ['.ivu'],// 要忽略的选择器并保留为px。 minPixelValue: 2,// 设置要替换的最小像素值。 propList: [ '*' ]// 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部 } } }; 引用文件flexible.js ;(function (win, lib) { ...
375:750,unitPrecision:5,// 单位转换后保留的精度propList:['*'],// 能转化为vw的属性列表viewportUnit:'vw',// 希望使用的视口单位fontViewportUnit:'vw',// 字体使用的视口单位selectorBlackList:['ignore-'],// 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。minPixelValue:1,// 设置...
官方文档: evrone/postcss-px-to-viewport 安装 npm install postcss-px-to-viewport --save-dev vue.config.js module.exports = { css: { loaderOptions: { postcss: