当前位置: 首页 > news >正文

postcss-px-to-viewport include属性

包含include配置的(github):npm i https://github.com/evrone/postcss-px-to-viewport -S

包含include配置的(npm):npm i postcss-px-to-viewport-8-with-include -S

不包含包include配置的(npm):npm i postcss-px-to-viewport

看了一下这篇文章,短期内就获得了很多浏览量,所以再详细说一下
1.第一次我使用的是: npm i postcss-px-to-viewport -S,配置include无效,是因为npm中的该插件内部其实并没有实现include
2.然后我就找到了第二个符合我条件的插件: npm i https://github.com/evrone/postcss-px-to-viewport,但是又发现,我们公司在部署的时候install 该插件的时候下载失败,应该就是链接github失败的问题
3.于是我又从npm中找符合条件的,于是找到了: npm i postcss-px-to-viewport-8-with-include -S,这个依赖虽然看起来每周的安装量很少,但是我安装后实测了一下,是完全没问题的。我的需求:我们平台突然新增了两个大屏界面,我并没有新开一个项目去写,就在后台管理系统新开了两个路由界面去写的,但是我又不想影响其他的界面,所以需要配置include让插件只对两个大屏界面生效
我的配置代码如下:
const loderPx2vw = px2vw({unitToConvert: 'px', // 需要转换的单位,默认为"px"viewportWidth: 1920, // 视窗的宽度,对应pc设计稿的宽度viewportHeight: 1080, // 视窗的高度,对应的是我们设计稿的高度unitPrecision: 2, // 单位转换后保留的精度propList: [// 能转化为vw的属性列表'*',],viewportUnit: 'vw', // 希望使用的视口单位fontViewportUnit: 'vw', // 字体使用的视口单位selectorBlackList: [], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换mediaQuery: false, // 媒体查询里的单位是否需要转换单位replace: true, // 是否直接更换属性值,而不添加备用属性exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件include: [/src\/views\/screenPage\//],
});
http://www.lryc.cn/news/307984.html

相关文章:

  • C++设计模式——抽象工厂模式
  • Windows安装VNC连接工具并结合cpolar实现远程内网Ubuntu系统桌面
  • Vue3 Hooks函数使用及封装思想
  • YOLOv8改进涨点,添加GSConv+Slim Neck,有效提升目标检测效果,代码改进(超详细)
  • 华为s5720s-28p-power-li-ac堆叠配置
  • c# aes加密解密私钥公钥通钥
  • 上拉电阻与下拉电阻、电容的作用
  • 《Spring Security 简易速速上手小册》第1章 Spring Security 概述(2024 最新版)
  • vue页面菜单权限问题解决
  • C++面试宝典第33题:数组组成最大数
  • “影像承载初心” 国际数字影像产业园2024首届摄影沙龙诚邀您的参与!
  • 【C语言】while循环语句
  • 2024数字中国创新大赛·数据要素赛道“能源大数据应用赛”正式上线!参赛指南请查收
  • react-JSX基本使用
  • 学习阶段单片机买esp32还是stm32?
  • 【Simulink系列】——Simulink子系统子系统封装模块库技术
  • 一加手机线刷2024版,param预载失败/MSM刷机工具报错
  • 文件拖放到窗体事件
  • JAVA集成微信支付V3版JSAPI下单
  • opengles 背面剔除介绍(十二)
  • 【深度学习:视频注释】如何为机器学习自动执行视频注释
  • 网络编程、UDP、TCP
  • Maya笔记 设置工作目录
  • MySQL:连接查询
  • 歌尔气压计SPA06-003在无人机和手表上的创新应用
  • 从0到1实现五子棋游戏!!
  • 二叉树(C/C++)
  • Django学习笔记-ModelForm使用(完全依赖)
  • 动态规划之使用最小花费爬楼梯【LeetCode】
  • 双指针---解决实际问题