css - gatsby-plugin-postcss + autoprefixer + browserslist 的 Gatsby 插件设置

Question

我的目标是拥有 gatsby-plugin-postcss在 gatsby build 期间为我的 CSS 文件设置所有浏览器前缀.从文档中，首选方法是使用 browserslist，并在 gatsby 构建过程中使用带有 postcsss 的 autoprefixer。
我的 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() }),
        ],
      },
  ],
};

包.json:

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

我得到这个警告:

warnReplace Autoprefixer browsers option to Browserslist config.Use browserslist key in package.json or .browserslistrc file.

Using browsers option can cause errors. Browserslist configcan be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at:https://github.com/browserslist/browserslist#readmehttps://twitter.com/browserslist

HTML 显示没有设置前缀。
此配置有效(因为在包含浏览器前缀的构建文件中)，但它仍然提示我不使用浏览器列表:

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

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

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。