记录vue/cli3配置postcss踩坑

最新推荐文章于 2024-05-14 12:45:21 发布

swag_特约男演员

最新推荐文章于 2024-05-14 12:45:21 发布

阅读量700

点赞数

文章标签： vue.js postcss javascript

本文链接：https://blog.csdn.net/usernotdefined/article/details/130555718

版权

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"
  ]