将 Autoprefixer 浏览器选项替换为浏览器列表

Question

我正在使用[Metronic v6.03]

我按照文档中的快速入门教程进行操作。 https://keenthemes.com/metronic/?page=docs

如果我输入命令“gulp build”，我会收到一条消息：

“将 Autoprefixer 浏览器选项替换为浏览器列表配置。在 package.json 或 .browserslistrc 文件中使用 browserslist 键。

使用浏览器选项会导致一些错误。浏览器列表配置可用于 Babel、Autoprefixer、postcss-normalize 等工具。

如果您确实需要使用选项，请将其重命名为 overrideBrowserslist。

主题无法正确编译。

NPM版本：6.9.0

纱线版本：1.16.0

咕噜咕噜版本

命令行：2.2.0

本地版本：4.0.2

我将 package.json 中的 browserlist 行更改为

“浏览器列表”：[

"last 1 version",

"> 1%",

"maintained node versions",

"not dead"

]

并尝试用 :

替换该行

“浏览器列表”：[

"defaults"

]

在 Linux 上，我添加了一个文件 .browserslistrc ，其中包含上面的行。

Answer 1

问题将在

gulpfile.js

。

寻找

autoprefixer()

，这个函数将有一些选项作为参数传递。删除这些选项。并将它们移至您的

package.json

作为

browserslist: ["browserConfig1", "browserConfig2", "..."

]。

Answer 2

转到 helpers.js 文件的第 128 行，您必须更改浏览器选项以覆盖浏览器列表。然后就可以工作了

Answer 3

您可以创建 .browserslistrc 而不是编辑 package.json：

last 1 version

>1%

maintained node versions

not dead

`

Answer 4

使用 overrideBrowserslist 更新 browsers 到 webpack.config 文件中的 autoprefixer 对象中解决了我的问题。

之前，

config.postcss = [
    autoprefixer({
        browsers: ['last 2 version']
    })
];

更新后

config.postcss = [
    autoprefixer({
        overrideBrowserslist: [
            'last 2 version',
            '> 1%'
        ]
    })
];