Gatsby-plugin-postcss + autoprefixer + browserslist 的 Gatsby 插件设置答案

【问题标题】：Gatsby plugin settings for gatsby-plugin-postcss + autoprefixer + browserslistGatsby-plugin-postcss + autoprefixer + browserslist 的 Gatsby 插件设置
【发布时间】：2020-08-27 04:13:16
【问题描述】：

我的目标是让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() }),
        ],
      },
  ],
};

package.json:

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

我得到这个警告：

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

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

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

了解更多信息： https://github.com/browserslist/browserslist#readme https://twitter.com/browserslist

HTML 显示没有设置前缀。

此配置有效（因为构建文件中包含浏览器前缀）但它仍然抱怨我不使用浏览器列表：

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

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

【问题讨论】：

标签： css cross-browser gatsby postcss autoprefixer

【解决方案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。

【讨论】：