不生效的问题,可以按照以下步骤进行排查和解决: 检查插件是否正确安装: 首先,确保你已经正确安装了 postcss-px-to-viewport-8-plugin 插件。你可以通过运行以下命令来检查是否已安装:bash npm list postcss-px-to-viewport-8-plugin 如果列表中没有显示该插件,说明你需要进行安装。可以使用以下命令来安装: bash npm...
就是使用 unocss 中px选择器如 w-[1200px] ,期望的是最终页面显示一个 width: 1200px 的元素,但是 postcss-px-to-viewport-8-plugin 插件会把 px 转换成 vw,一个vw相当于屏幕视口的 1%,如果你使用了老师视频中讲解的 postcss-px-to-viewport-8-plugin 插件页面最终的 width: 160vw 。(计算思路是 750 ...
'postcss-px-to-viewport': { viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750 // viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除) viewportUnit: 'vw', //...
module.exports= {plugins: {'postcss-px-to-viewport-8-plugin': {unitToConvert:'px',// 需要转换的单位,默认为"px"viewportWidth:750,// 设计稿的视口宽度unitPrecision:5,// 单位转换后保留的精度propList: ['*','!font-size'],// 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被...
postcss-px-to-viewport 的 exclude 配置无效 原来是由于版本太低的缘故: postcss-px-to-viewport 0.0.3版本不支持 exclude属性。 更新到 1.1.0 配置: //路径中包含 PC ,则忽略 px转换为vw,vh,vmax,vminexclude: /(\/|\\)(PC)(\/|\\)/,
import{defineConfig}from'vite';importpostcsspxtoviewport8pluginfrom'postcss-px-to-viewport-8-plugin';exportdefaultdefineConfig({css:{postcss:{plugins:[postcsspxtoviewport8plugin({unitToConvert:'px',viewportWidth:file=>{letnum=1920;if(file.indexOf('m_')!==-1){num=375;}returnnum;},unitPrecis...
@function pad($px) { @return calc(#{$px * 100vmin} / #{$padViewport}); } 然后写一个JS 实现同样的功能 获取设备类型,转换尺寸 import{useWindowSize}from'@vant/use'//vant获取屏幕尺寸,可自行替换import{ref,watch}from'vue'// phone 手机 pad 平板 设备类型exporttypeScreenTypeReutrn='phone'|...
postcss-px-to-viewport 替换 postcss-px-to-viewport-8-plugin 修复因为postcss版本导致的atRule is not a constructor问题 对应库版本 "postcss":"^8.3.8",// 8.0.0版本都不会转单位"postcss-loader":"^6.1.1", 安装 npminstallpostcss-px-to-viewport-8-plugin-Doryarnaddpostcss-px-to-viewport-8-plugi...
postcssPlugin: 'postcss-px-to-viewport', Once (css, { result, AtRule }) { css.walkRules(function (rule) { // Add exclude option to ignore some files like 'node_modules' var file = rule.source && rule.source.input.file; if (opts.include && file) { ...