插件不生效的问题,我为你整理了以下可能的解决方案和检查步骤,请按照这些步骤逐一排查: 检查插件安装: 确保你已经正确安装了 postcss-px-to-viewport 插件。可以通过运行以下命令来安装: bash npm install postcss-px-to-viewport --save-dev 如果你是从 GitHub 上安装的包含 include 配置的特殊版本,请使用以下...
就是使用 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 ...
viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名 minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值 mediaQuery: false /...
重启项目 【注】上述方案对行内样式不生效,行内样式中 px 转 vw 可使用自定义方法实现 编写函数 utils/pxToVw.ts import{ isNumber }from'lodash'exportfunctionpxToVw(px:number|string, width =1920) {if(!isNumber(px)) {returnpx }return`${(Number(px) / width) *100}vw`} 在需要使用 px 转 vw ...
重新运行项目,使配置文件生效 我们写一段测试代码来验证一下: <template>测试转换</template>.test-viewport{width:750px;height:100px;font-size:40px;text-align: center;line-height:100px;background:#13b5b1; } 打开控制台,可以看到已经进行了转换 需要注意的配置 propList...
因为原作者迟迟不发布,所以我fork了一份,发布了一个包含include配置的包:postcss-px-to-viewport-update,大家可以在原作者release之后再换回来。 hi guys, i forked this repo & published a package withinclude-postcss-px-to-viewport-update. you can use this one until this repo releases a new version....
试了下,发现build的时候,这个plugins成功起效果了,但是在开发环境的时候(运行npm run dev),没有生效,如果我想开发环境下也要生效,需要怎么做啊?
'vw',//横屏时使用的单位landscapeWidth:1920//横屏时使用的视口宽度}}}1、重新运行项目，触发配置文件生效。2、检测：我们以px为单位 1、配置之前，DOM宽高未跟随屏幕大小改变而改变。2、配置生效后，原有的代码中px在编译阶段被自动实时转换成vw视口单位，DOM元素与视口大小等比例缩放。
npm i https://github.com/evrone/postcss-px-to-viewport--save-dev npm经常安装不下,需要多试几次,如果还是不行就使用cnpm安装 安装了这个包之后,文档上的配置是通过正侧写入路径,但是根据文档上的配置是不起效的,只需要通过正则配置文件夹名就可以生效...
切记不能写style行内样式不会生效. vue-cli2: 在更目录下新建.postcssrc.js module.exports ={"plugins": {//"postcss-import": {},s"postcss-url": {},//to edit target browsers: use "browserslist" field in package.json//"autoprefixer": {},"autoprefixer": { ...