移动端碰到No PostCSS Config found in...怎么办？

项目背景

项目是一个vue项目,需要样式，引入vant组件。需要移动端自适应字体，引入postcss-px-to-viewport.再次运行项目的时候触发一个问题No PostCSS Config found in ...

解决方法

先说结论 安装vant,postcss-px-to-viewport报错 No PostCSS Config found in... 。

解决方法: 安装postcss-loader

npm install postcss-loader

项目运行

1. 项目 project

   "vue":"^3.0.0",
   "vue-router":"^4.0.0-0",
   "vuex":"^4.0.0-0"
   ...

2. 依赖 depence

dependencies: {
    "debounce": "^1.2.1",
    "vconsole": "^3.11.1"
    ...
}

3. 引入组件库 1.vant

---------------引入----------------
vue2项目
npm install vant -S
vue3项目
npm install vant@next -S
--------------使用----------------
入口文件 src/main.js
import {createApp} from "vue"
import App from "./App.vue"
const app = createApp()
import {Button} from "vant"
import "vant/lib/index.css"
app.use(Button)
...

2.postcss-px-to-viewport

--------------引入------------------
npm install postcss-px-to-viewport --save-dev
或者 
yarn add postcss-px-to-viewport -D
-------------使用------------------
postcss.config.js  根目录
modules.export = {
  plugin: {
    "postcss-px-to-viewport": {
        viewportWidth: 375,
        unitPrecison: 2,
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        propList: ["*","!letter-spaceing"]
        ...
    }
  }
}

此时报错No PostCSS Config found in:... 我们先查一下webpack Loader，其中postcss-loader，作用：css兼容处理，具有众多功能，比如：代码前缀，单位转换。找到解决方法了。安装postcss-loader。

npm install postcss-loader