2020-09-28 解决 vue 使用 element-ui 报错 in ./node_modules/[email protected]@element-ui/lib/theme-cha...

由于配置了 postcss 的插件 autoprefixer 自动添加前缀插件，在插件配置时出错，参照官网的配置，并没有配置规则

module.exports = {
  'plugins': {
    // to edit target browsers: use "browserslist" field in package.json
    'autoprefixer': {}
  },
}

上面是官网写的配置，并没用写 需要添加的浏览器规则

于是，经过一番波折，找到一份 配置规则

module.exports = {
  plugins: [
    // 兼容浏览器，添加前缀
    require('autoprefixer')({
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
        //'last 2 versions', // 所有主流浏览器最近2个版本
      ],
      grid: true
    })
  ]
}

写上去，自动添加前缀的小姑生效了，但是出现了一个报错，
虽然报错并不影响程序运行，服务器依然启动了，
但是，看着报错始终觉得有问题，没提示才是最好的

image.png

报错信息如上

解决方式，

image.png

---

Please do not use display: contents; if you have grid setting enabled

请不要使用显示:内容;如果您启用了网格设置

就很明显了，如掉 配置中的 grid: true 即可

module.exports = {
  'plugins': {
    // to edit target browsers: use "browserslist" field in package.json
    'autoprefixer': {
      browsers: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
        //'last 2 versions', // 所有主流浏览器最近2个版本
      ]
    }
  },
}

或者这样

module.exports = {
  plugins: [
    // 兼容浏览器，添加前缀
    require('autoprefixer')({
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
        //'last 2 versions', // 所有主流浏览器最近2个版本
      ]
    })
  ]
}

这样报错信息就没了