2021-10-12记录vue+vant项目使用postcss实现移动端适配遇到的问题

最新推荐文章于 2024-08-16 11:06:00 发布

qq_26839361

最新推荐文章于 2024-08-16 11:06:00 发布

阅读量964

点赞数

分类专栏：问题记录文章标签： vue.js postcss webpack

本文链接：https://blog.csdn.net/qq_26839361/article/details/120738941

版权

在尝试使用Vant UI和PostCSS进行移动端适配时，作者遇到了诸多问题，包括“[object Object] is not a PostCSS plugin”和“no postcss config in …”的错误。通过安装lib-flexible、调整postcss-pxtorem版本以及正确配置webpack和loader，解决了这些问题。在项目启动后，页面字体大小异常，经过清理不必要的配置，最终按照官方文档完成适配，使得项目正常运行。

摘要由CSDN通过智能技术生成

为了研究vantUI自己创建了个项目，一开始写了两个列表页，后来看到vant有移动端适配的插件，想着试用一下，入坑开始。。。。
一、错误一：[object Object] is not a PostCSS plugin
第一次引入postcss-pxtorem报错，百度了好多方法，试了各种配置，没解决，最后发现是lib-flexible没安装，还有styleloader，并且postcss-pxtorem版本也有问题，选择安装5.1.1版本，这样就不报这个错了。。。

二、错误二：no postcss config in …
这个错误是因为：
首先main.js里需要引入lib-flexible文件：

import 'lib-flexible/flexible';

其次webpack.base.conf.js里需要配置：

{
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass',{
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: () =>{
              require('autoprefixer')
            }
          }
        }]
      },

至于网上说postcssrc.js文件中改这改那，统统不要，按官