基于vue cli5使用vant 组件，postcss-px-to-viewport 无法解析vant内部样式问题

最新推荐文章于 2025-04-21 17:38:17 发布

hyb_sir

最新推荐文章于 2025-04-21 17:38:17 发布

阅读量3.3k

点赞数 2

本文链接：https://blog.youkuaiyun.com/qq_39831708/article/details/125472960

版权

参照以上vant官网提供的方式，发现只能编译项目内部开发的页面，根本无法将vant样式px编译为vw单位，以下是使用官方例子后编译后的样式单位

项目基于vue-cli5搭建的，后续解决方式采用webpack中postcss-loader参数postcssOptions解决。具体无法解析的原因不详，估计与vue-cli配置有关。以下是解决后的样式单位

附上解决方案,首先安装postcss-px-to-viewport

npm install postcss-px-to-viewport --save-dev

以下是vue.config.js的代码,并且支持了项目ui设计稿为750px标准情况

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: (loaderC

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hyb_sir

关注关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue2之移动端布局之postcss-px-to-viewport（兼容vant-ui）

https://shixuebin.gitee.io/hexo-blog/

06-23

2898

安装 npm i postcss-px-to-viewport -D 并在项目根目录下添加.postcssrc.js文件添加如下配置： module.exports = { plugins: { "postcss-px-to-viewport": { unitToConvert: "px", // 要转化的单位 viewportWidth: 750, // UI设计稿的宽度 unitPrecision: 6,

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

最新发布

江湖行骗老中医

04-21

762

这个插件主要用于响应式设计，使网页在不同设备和屏幕尺寸上具有更好的适应性。是一个 PostCSS 插件，用于将 CSS 中的像素单位（px）转换为视口单位（安装好插件后，需要在 PostCSS 配置文件（例如。然后，在你的 PostCSS 配置文件（通常是。

vue-cli5中使用postcss-px-to-viewport

CSTGShaGuo的博客

02-25

2169

vue-cli5中使用postcss-px-to-viewport

解决vue@cli 5版本使用postcss-px-to-viewport适配vant问题

weixin_45965766的博客

04-19

764

搞了很久,希望对你们有帮助ε=(´ο｀*)))唉,版本问题真烦!在postcss.config.js配置一直报错, 换到。

vite项目 postcss-px-to-viewport适配vant

slice_93的博客

11-27

1873

【代码】vite项目 postcss-px-to-viewport适配vant。

配置postcss-px-to-viewport报错[plugin:vite:css] Failed to load PostCss config module is not defined in

weixin_44295184的博客

12-14

2268

配置postcss-px-to-viewport报错[plugin:vite:css] Failed to load PostCss config module is not defined in

移动端布局之postcss-px-to-viewport（兼容vant）

woniuyibuyibu的博客

05-08

3613

在今天这篇文章中，我并不会在这里讲一些移动端视口的概念，包括物理像素和逻辑像素，理想视口，dpr等等等等，我只介绍这样一种非常不错的移动端适配方案：post-css-to-viewport，如果我说这种方案能解决98%以上的移动端布局痛点，我想整个掘金，应该没有人会反驳。

Vue3 vite使用postcss-px-to-viewport（适配vant）

行如逆水行舟，不进则退

06-26

729

【代码】Vue3 vite使用postcss-px-to-viewport（适配vant）

【vue】使用postcss-px-to-viewport和style-vw-loader进行pc端和移动端适配，解决行内样式不能转换为vw的问题

qq_43691733的博客

09-15

2742

但是postcss-px-to-viewport做适配，行内样式不能转换为vw，所以使用插件style-vw-loader(github地 https://github.com/hyy1115/style-vw-loader)vue-cli3中我们可以引入postcss-px-to-viewport插件。

postcss-px-to-viewport:PostCSS的插件，可从像素单位生成视口单位（vw，vh，vmin，vmax）。通过一个设计尺寸在不同的显示器上创建可扩展界面的最佳选择

05-02

postcss px到视口 English | 的插件，从像素单位生成视口单位（vw，vh，vmin，vmax）。演示版如果您的项目涉及固定宽度，则此脚本将有助于将像素转换为视口单位。输入 . class { margin : -10 px .5 vh ; padding : 5 vmin 9.5 px 1 px ; border : 3 px solid black; border-bottom-width : 1 px ; font-size : 14 px ; line-height : 20 px ; } . class2 { padding-top : 10 px ; /* px-to-viewport-ignore */ /* px-to-viewport-ignore-next */ padding-bottom : 10 px ;

前端开源库-postcss-px-to-viewport

08-29

前端开源库-postcss-px-to-viewportpostss px to viewport，一种将px转换为viewport单位（vw、vh、vmin、vmax）的CSS后置处理器。

移动端H5应用，使用了postcss-px-to-viewport插件，750设计稿兼容Vant框架

weixin_45849417的博客

06-30

654

目前在搞一个移动端的H5项目，使用的是Vue3+Vant框架。设计稿是750的，而且使用了postcss-px-to-viewport。所以发现使用Vant框架的时候，发现有点问题，好像缩小了，后来百度了一下，是需要设置portcss.config.js。下面是代码：报错时候的配置：使用下面这个。

vue2 移动端H5 vant 之安装postcss-px-to-viewport插件及配置

cdfdfgrd的博客

06-18

710

vue2 移动端H5 vant 之安装postcss-px-to-viewport插件及配置

vite中使用postcss-px-to-viewport,适配vant

weixin_43239880的博客

08-21

3854

由于不是将所有的页面进行适配，所以我们只能通过vw的include配置来将某几个页面进行适配，如果使用rem的话，则会将所有的页面都进行rem适配了。于是我们正常去使用postcss-px-to-viewport，但是会发现include配置并没有什么用。cnjm的postcss-px-to-viewport，这个我没有去试，因为看了md发现是只增加了暴露文件的代码。我们使用完整版的’postcss-px-to-viewport’，安装使用以下命令。效果：可以看到vant组件中的单位也已经变成了vw了。

适配：postcss-px-to-viewport

Mozifei73的博客

06-28

1653

这要项目中以px以及第三方库中的px单位全部转换成vw，如果要对哪些类不进行转换就在selectorBlackList填写类名就可以了注明：行内样式无效，只能手动换算vw

vue2使用postcss-px-to-viewport 使vant的px变成rem

09-11

在Vue 2项目中使用`postcss-px-to-viewport`来将Vant UI库的px单位转换成rem单位，可以实现项目的适配性更好，尤其是在不同分辨率的屏幕上。以下是实现的步骤： 1. 安装`postcss-px-to-viewport`和`autoprefixer`。这两个插件可以帮助你将px单位转换成viewport单位，同时自动添加浏览器前缀。使用npm或者yarn来安装它们。 ```bash npm install postcss-px-to-viewport autoprefixer --save-dev # 或者 yarn add postcss-px-to-viewport autoprefixer --dev ``` 2. 在项目的根目录创建或修改`postcss.config.js`文件，并配置`postcss-px-to-viewport`插件。你需要指定转换的视口宽度、单位和其它配置选项。以下是一个基本的配置示例： ```javascript module.exports = { plugins: { // 先运行 autoprefixer 进行样式兼容性处理 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, // 再运行 px-to-viewport 自动将 px 转换成对应的视口单位 'postcss-px-to-viewport': { viewportWidth: 375, // 视口宽度，通常是设计稿的宽度 viewportHeight: 667, // 视口高度 unitPrecision: 3, // 单位转换后保留的精度 viewportUnit: 'rem', // 希望使用的视口单位 selectorBlackList: [], // 需要排除的CSS选择器，不会转为视口单位 minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 exclude: /node_modules/i // 忽略 node_modules 下的文件 } } }; ``` 3. 确保你的构建工具支持PostCSS。如果你使用的是Vue CLI创建的项目，Vue CLI已经包含了对PostCSS的支持。如果你使用的是Webpack，那么你需要在Webpack配置中加入对应的loader来处理CSS文件。 4. 重新启动你的开发服务器，这样`postcss-px-to-viewport`就会自动处理你的样式文件中的px单位。