Gatsby插件postpass+autoprefixer+browserslist的Gatsby插件设置

Question

我的目标是让gatsby-plugin-postcss在gatsby build期间为我的CSS文件设置所有浏览器前缀。在文档中，首选的方法是使用browserslist，并在gatsby构建过程中使用autoprefixer和postsss。

我的gatsby-config.js:

const autoprefixer = require("autoprefixer");
const browserslist = require('browserslist');
module.exports = {
},
plugins: [
// `gatsby-plugin-postcss`,
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [
autoprefixer({ browsers: browserslist() }),
],
},
],
};

package.json:

// ...
"browserslist": ["defaults"]

我收到警告：

警告将Autoprefixer浏览器选项替换为Browserslist配置。使用package.json或.browserslistrc文件中的browserslist键。

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

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

了解更多信息，请访问：https://github.com/browserslist/browserslist#readmehttps://twitter.com/browserslist

HTML显示没有设置前缀。

这个配置有效(就像在包含浏览器前缀的构建文件中一样(，但它仍然抱怨我没有使用browserlist:

{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [
autoprefixer({
browsers: ['last 2 versions', 'not ie 10'],
grid: true,
})
],
},
}

什么是正确的插件选项配置，以便autoprefixer获取我的浏览器列表？

Answer 1

在我的gastby-config.js文件中

const autoprefixer = require('autoprefixer');
const postcssAspectRatio = require('postcss-aspect-ratio');

{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [
autoprefixer(),
postcssAspectRatio
],
},
},

我有一个单独的.browserslistrc文件用于浏览器选项。检查您的依赖关系，但不需要单独安装browserlist-npm。