cnjm-postcss-px-to-viewport

基于postcss-px-to-viewport插件稍加改造的
和使用postcss-px-to-viewport 是基本一样的，只是多处理了vant等375尺寸问题，你也可以选择克隆到自己仓库中使用，也可以直接使用笔者改的

顺便把插件升级了postcss到v8+,规避了postcss.plugin was deprecated. Migration guide: 的警告（实则就是插件跟心postcss依赖到8，并且使用新的api即可）

npm i cnjm-postcss-px-to-viewport
锁死v0.0.2,则为不更新postcss版本

简介（为什么有）

一直希望在vite 中使用 postcss-px-to-viewport 时可以设置不同的设计尺寸，比如vant是375设计的

而我们可能是750或其他尺寸，一直找了好久都没有合适的解决方案（有个webpack的，不过vite的貌似不行），如果有知道其他好的解决方法的，麻烦告知一下，感激不尽！

方案一

干脆就稍加改了一下postcss-px-to-viewport的代码

其实就是在src/index.js中加入了以下代码，把当前文件路径暴露出去，接收一个新的viewportWidth并赋值给opts

具体可以看下源代码

if(opts.customFun){opts.viewportWidth = opts.customFun({file:rule.source.input.file});
}

配置时使用cnjm-postcss-px-to-viewport

const path = require("path");
module.exports = () => {return {plugins: {autoprefixer: {overrideBrowserslist: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8"],},// 修改插件名称"cnjm-postcss-px-to-viewport": {unitToConvert: "px", // 要转化的单位viewportWidth: 750, // UI设计稿的宽度unitPrecision: 6, // 转换后的精度，即小数点位数propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vwfontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vwselectorBlackList: ["ignore"], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认falsereplace: true, // 是否转换后直接更换属性值exclude: [], // 设置忽略文件，用正则做目录名匹配landscape: false, // 是否处理横屏情况// 如果没有使用其他的尺寸来设计，下面这个方法可以不需要，比如vant是375的customFun: ({ file }) => {// 这个自定义的方法是针对处理vant组件下的设计稿为375问题const designWidth = path.join(file).includes(path.join("node_modules", "vant")) ? 375 : 750;return designWidth;},},},};
};

方案二

https://github.com/vitejs/vite/issues/4653 多个配置,这将导致插件处理两次，优点缺点都很明显，具体怎么用，见人见智了

const px2viewport = require("postcss-px-to-viewport");
const autoprefixer = require("autoprefixer");
module.exports = () => {return {plugins: [autoprefixer({overrideBrowserslist: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8"],}),px2viewport({unitToConvert: "px", // 要转化的单位viewportWidth: 375, // UI设计稿的宽度unitPrecision: 6, // 转换后的精度，即小数点位数propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vwfontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vwselectorBlackList: ["ignore"], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认falsereplace: true, // 是否转换后直接更换属性值exclude: [/^(?!.*node_modules\/vant)/], // 设置忽略文件，用正则做目录名匹配landscape: false, // 是否处理横屏情况}),px2viewport({unitToConvert: "px", // 要转化的单位viewportWidth: 750, // UI设计稿的宽度unitPrecision: 6, // 转换后的精度，即小数点位数propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vwfontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vwselectorBlackList: ["ignore"], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认falsereplace: true, // 是否转换后直接更换属性值exclude: [/node_modules\/vant/i], // 设置忽略文件，用正则做目录名匹配landscape: false, // 是否处理横屏情况}),],};
};

方案三

直接替换vant :root 下的变量下的数值，没验证过，但想来应该挺麻烦的。

【postcss】解决vite中使用postcss-px-to-viewport无法使用vant等多种设计尺寸问题|postcss-plugins相关推荐

mysql子查询为什么不走索引_解决MySQL中IN子查询会导致无法使用索引问题
测试表如下: CREATE TABLE`test_table` ( `id`int(11) NOT NULLAUTO_INCREMENT, `pay_id`int(11) DEFAULT NULL, ...
解决Chrome中UEditor插入图片的选择框加载过慢问题
解决Chrome中UEditor插入图片的选择框加载过慢问题 ../resources/plugins/ueditor/ueditor.all.js 中line24489/24498中的 accept ...
postcss解决兼容_使用PostCSS进行跨浏览器兼容性
postcss解决兼容在上一个教程中,我们总结了本系列的"快速入门"部分,现在我们可以继续使用PostCSS生成样式表,并使用各种类型的插件实现各种目的. 在本教程中,我们将使用 ...
Vue项目中自动将px转换为rem
一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: // 基准 ...
html+监听+页面滚动到底部,解决HTML5中滚动到底部的事件问题
问题:在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多. 解决方案:可以采用window的滚动事件进行处理分析:如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个 ...
vue实战(1)——解决element-ui中upload组件使用多个时无法绑定对应的元素
解决element-ui中upload组件使用多个时无法绑定对应的元素以前写的项目关于图片上传的都是单张或几张图片上传(主要是基于vue的element),图片路径都是固定写的,所以遇见过列表中多个 ...
今日头条首次改进DQN网络，解决推荐中的在线广告投放问题
(图片付费下载自视觉中国) 作者 | 深度传送门来源 | 深度传送门(ID:gh_5faae7b50fc5) [导读]本文主要介绍今日头条推出的强化学习应用在推荐的最新论文[1],首次改进DQN网络 ...
解决MyBatis中 Could not set property ~ o f ~异常
解决MyBatis中 Could not set property ~ of ~ public class Role {private Integer id; //idprivate String r ...
解决存储过程中数据安全问题的四种方式
随着科技的不断发展,数据量也正在呈指数倍的增加.在这样一个大背景下,存储产品成为了时下市场中最热的产品.而数据的安全性也变得尤为重要.后端存储已经逐渐成为企业业务系统的核心和关键. 一般而言,我们有四 ...

【postcss】解决vite中使用postcss-px-to-viewport无法使用vant等多种设计尺寸问题|postcss-plugins

cnjm-postcss-px-to-viewport

简介（为什么有）

方案一

方案二

方案三

【postcss】解决vite中使用postcss-px-to-viewport无法使用vant等多种设计尺寸问题|postcss-plugins相关推荐

最新文章

热门文章