不生效的问题,可以按照以下步骤进行排查和解决: 检查插件是否正确安装: 首先,确保你已经正确安装了 postcss-px-to-viewport-8-plugin 插件。你可以通过运行以下命令来检查是否已安装:bash npm list postcss-px-to-viewport-8-plugin 如果列表中没有显示该插件,说明你需要进行安装。可以使用以下命令来安装: bash npm...
同时使用 unocss 和 postcss 中 postcss-px-to-viewport-8-plugin 这个插件可能会遇到一个问题。就是使用 unocss 中px选择器如 w-[1200px] ,期望的是最终页面显示一个 width: 1200px 的元素,但是 postcss-px-to-viewport-8-plugin 插件会把 px 转换成 vw,一个vw相当于屏幕视口的 1%,如果你使用了老师视频...
module.exports= {plugins: {'postcss-px-to-viewport-8-plugin': {unitToConvert:'px',// 需要转换的单位,默认为"px"viewportWidth:750,// 设计稿的视口宽度unitPrecision:5,// 单位转换后保留的精度propList: ['*','!font-size'],// 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被...
我们会写个JS函数
这通常是因为postcss-px-to-viewport插件默认会忽略node_modules目录中的文件。此时,可以通过修改exclude配置项来解决问题。例如,可以设置为空数组[]来取消忽略,或者通过正则表达式只忽略特定的文件。 处理行内样式:需要注意的是,postcss-px-to-viewport插件只能转换在style标签中定义的样式,而无法转换行内样式。因此,在...
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) { ...
把viewportWidth, viewportHeight 都缩下一半 0 0 0 没找到需要的内容?换个关键词再搜索试试 向你推荐 postcss-loader 有版本问题 2020年的今天,px-to-viewport方案是不是更好? postcss的配置问题 配置less-loader遇到的问题随时随地看视频慕课网APP 相关...
@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...
npm install postcss-px-to-viewport-8-plugin -D 具体使用参考迁移指南npm仓库 https://www.npmjs.com/pa...