vue3.0 H5页面配置 Autoprefixer 报警Replace Autoprefixer browsers option to Browserslist config.

最新推荐文章于 2024-07-10 22:03:52 发布

原创最新推荐文章于 2024-07-10 22:03:52 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#postcss #javascript #前端

vue实战同时被 3 个专栏收录

28 篇文章

订阅专栏

移动端

4 篇文章

订阅专栏

项目报错

2 篇文章

订阅专栏

解决Vue3.0项目中H5页面px转rem自适应问题，更新autoprefixer配置避免警告。调整postcss.config.js文件中的browserslist设置，确保兼容目标浏览器版本。

vue3.0 配置H5 的px转rem自适应时，报Autoprefixer相关预警：
Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

在这里插入图片描述
原因：postcss.config.js 文件中，引用的版本过高，需要修改

postcss.config.js 更改前代码

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

postcss.config.js 文件更改后代码

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}