记录vue/cli3配置postcss踩坑

原创于 2023-05-08 11:43:02 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

文章标签：

在Vue项目中，使用vue脚手架的browserslist自动处理浏览器兼容性，但在安装postcss-preset-env时遇到错误。作者发现是由于高版本的postcss-preset-env与vue/cli中的postcss版本冲突。通过将postcss-preset-env降级到6.7.0，成功解决了报错并使项目运行正常。

vue脚手架自带浏览器兼容

会根据package.json中的browserslist自动加上浏览器厂商前缀。
在这里插入图片描述

对低版本浏览器css属性兼容

在这里插入图片描述
这里安装postcss-preset-env就出问题了，老是报错TypeError: Invalid PostCSS Plugin found at: plugins[0]我还以为是配置问题，一直修改postcss.config.js的写法，经过深思熟悉怀疑了是高版本的postcss-preset-env与vue/cli中postcss版本不兼容。果断降级postcss-preset-env版本，一直降到6.7.0就可以跑起来项目了。

package.json配置

"postcss": {
    "presets": [
      [
        "env",
        {
          "targets": {
            "browsers": [
              "> 1%",
              "Chrome > 31",
              "Firefox > 31",
              "ie >= 6",
              "last 10 versions"
            ],
            "node": true
          }
        }
      ]
    ],
    "plugins": {
      "autoprefixer": {
        "grid": true
      },
      "postcss-preset-env": {
        "stage": 0
      }
    }
  },
  "browserslist": [
    "> 1%",
    "Chrome > 31",
    "Firefox > 31",
    "ie >= 6",
    "last 10 versions"
  ]