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.mzph.cn/news/709769.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 基础之 vmstat 命令详解

文章目录 一、前言二、使用说明2.1 vmstat [delay/count/d/D/t/w]2.2.vm模式的字段 一、前言 vmstat(VirtualMeomoryStatistics,虚拟内存统计)是一个不错的 Linux/Unix 监控工具,在性能测试中除了top外也是比较常用的工具之一,它可以监控操作…

同局域网共享虚拟机(VMware)

一、前言 首先我们先来了解下 VMware 的三种网络模式桥接模式、NAT模式、仅主机模式,网络类型介绍详情可以参考下我之前的文档 Linux系统虚拟机安装(上)第三章 - 第9步指定网络类型。了解三种网络模式的原理之后,再来剖析下需求&…

Python爬虫——Urllib库-上

这几天都在为了蓝桥杯做准备,一直在刷算法题,确实刷算法题的过程是及其的枯燥且枯燥的。于是我还是决定给自己找点成就感出来,那么Python的爬虫就这样开始学习了。 注:文章源于观看尚硅谷爬虫视频后笔记 目录 Urllib库 基本使…

自定义View中的ListView和ScrollView嵌套的问题

当我们在使用到ScrollView和ListView的时候可能会出现显示不全的问题。那我们可以进行以下分析 ScrollView在测量子布局的时候会用UNSPECIFIED。通过源码观察, 在ScrollView的onMeasure方法中 Overrideprotected void onMeasure(int widthMeasureSpec, int heightMe…

MySQL数据库安装与配置全攻略

MySQL安装配置教程 MySQL是一种流行的开源数据库管理系统,广泛用于网站和服务器应用程序中存储数据。本教程将引导你完成在Windows系统上安装和配置MySQL数据库的步骤。 一、下载MySQL安装包 访问MySQL官方网站:MySQL Downloads选择"MySQL Commu…

MySQL进阶:大厂高频面试——各类SQL语句性能调优经验

👨‍🎓作者简介:一位大四、研0学生,正在努力准备大四暑假的实习 🌌上期文章:MySQL进阶:强推,冲大厂必精通!MySQL索引底层(BTree)、性能分析、使用…

HTTP笔记(五)

个人学习笔记(整理不易,有帮助点个赞) 笔记目录:学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 目录 一:HTTP报文首部 (1)HTTP请求报文 (2&#xff09…

WPF MVVM中List<>和ObservableCollection<>的区别与对比分析

在WPF MVVM&#xff08;模型-视图-视图模型&#xff09;架构中&#xff0c;数据绑定是实现UI与后端逻辑分离的关键特性。为了使UI能够响应后端数据的变化&#xff0c;通常需要用到特定的集合类型。在WPF中&#xff0c;最常见的两种集合类型是List< T>和ObservableCollect…

Kaggle 竞赛入门

打比赛不用写算法源码&#xff0c;应用的时候不用自己写。学习的时候可以自己写。 Kaggle 竞赛入门 认识 Kaggle 平台Kaggle竞赛知识前提结构化数据前提图像数据文本数据 Kaggle竞赛套路一个赛题的完整流程 认识 Kaggle 平台 Kaggle 官网 主页&#xff0c;比赛&#xff08;数据…

复现nerfstudio并训练自己制作的数据集

网站&#xff1a;安装 - nerfstudio GitHub - nerfstudio-project/nerfstudio&#xff1a;NeRF 的协作友好工作室 安装之前要确保电脑上已经有CUDA11.8或以上版本&#xff08;更高版本的可以安装11.8的toolkit&#xff09; 创建环境 conda create --name nerfstudio -y pyt…

Vector容器介绍

一、引言 在C标准库中&#xff0c;vector是一个非常重要的容器&#xff0c;它提供了动态数组的功能。与静态数组不同&#xff0c;vector可以在运行时动态地增加或减少其大小。这使得vector在处理不确定数量的数据时变得非常有用。vector容器保证了元素的连续存储&#xff0c;因…

浅谈 Linux 网络编程 - Server 端模型、sockaddr、sockaddr_in 结构体

文章目录 前言前置知识Server 端核心模型 【重点】相关函数 【重点】socket 函数bind 函数listen 函数accept 函数close 函数 sockaddr 数据结构 【重点】 前言 本文主要是对 Linux 网络编程中&#xff0c;Server 端的模型、相关函数 以及 sockaddr、sockaddr_in 结构体做介绍…

图片压缩上传实例

前台图片上传压缩是一种常见的需求&#xff0c;可以通过前端技术实现图片的压缩&#xff0c;减小图片的大小&#xff0c;提高页面加载速度。以下是一个前台图片上传压缩的实例&#xff1a; 首先&#xff0c;在前端页面中添加一个文件上传的input标签&#xff1a; <input ty…

黑马程序员——接口测试——day05——Request库、Cookie、Session、UnitTest框架

目录&#xff1a; Requests库 Requests库安装和简介设置http请求语法应用案例 案例1案例2案例3案例4Cookie Cookie简介CookieSession认证方式案例5-看演示&#xff0c;此代码不需实现Session Session简介Session自动管理Cookie案例6面试题Cookie和Session区别获取指定响应数据…

Codeforces Round 929 (Div. 3)

A. 全部负数处理到前面&#xff0c;全部都能变成正数 // Problem: A. Turtle Puzzle: Rearrange and Negate // Contest: Codeforces - Codeforces Round 929 (Div. 3) // URL: https://codeforces.com/contest/1933/problem/A // Memory Limit: 256 MB // Time Limit: 2000 …

300分钟吃透分布式缓存(拉钩教育总结)

开篇寄语 开篇寄语&#xff1a;缓存&#xff0c;你真的用对了吗&#xff1f; 你好&#xff0c;我是你的缓存老师陈波&#xff0c;可能大家对我的网名 fishermen 会更熟悉。 我是资深老码农一枚&#xff0c;经历了新浪微博从起步到当前月活数亿用户的大型互联网系统的技术演进…

Linux|centos7|yum和编译安装ImageMagick记录

一&#xff0c; yum安装imagemagick imagemagick这个软件是图像文件的处理神器&#xff0c;可以文字转图像以及图像的剪辑等等工作&#xff0c;也是配合人工智能工程的不可或缺的工具&#xff0c;具体的用处和特点就不在这里废话了&#xff0c;有兴趣的百度就行了 本次是在…

SpringBoot底层原理

SpringBoot底层原理 一 配置优先级 1.配置方式 Springboot中支持三种配置方式&#xff0c;分别为&#xff1a; application.propertiesapplication.ymlapplication.yaml 2.配置优先级 当存在多份配置文件时&#xff0c;配置文件会按照它们的优先级生效。 优先级从高到底…

Linux中df和du命令

当涉及到在Linux系统中管理磁盘空间时&#xff0c;df和du命令是非常有用的工具。除了基本用法外&#xff0c;它们还具有一些高级用法&#xff0c;可以提供更详细和定制化的磁盘信息。下面是Linux中df和du命令的十个常用的高级用法&#xff0c;附带相应的代码和输出。 df -i - 显…

欧盟网络安全产业分析

文章目录 前言一、欧盟网络安全战略历程二、欧盟网络安全政策法规2.1 《电子识别和信任服务条例》2.2 《支付服务指令(第二版)》2.3 NIS 指令系列三.欧盟主要的网络安全机构3.1 ENISA3.2 欧盟委员会3.3 欧洲数据保护委员会3.4 欧盟成员国自设的网络安全机构四、欧盟网络安全…