当前位置: 首页>编程语言>正文

postcss-px-to-viewport include属性

看了一下这篇文章,短期内就获得了很多浏览量,所以再详细说一下
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\//],
});



https://www.xamrdz.com/lan/5r21848780.html

相关文章: