Настройки плагина Gatsby для gatsby-plugin-postcss + autoprefixer + список браузеров

Моя цель - сделать так, чтобы gatsby-plugin-postcss установил все префиксы браузера для моего файла CSS во время gatsby build. Из документации, предпочтительный способ - использовать список браузеров и использовать autoprefixer с postcsss во время процесса сборки gatsby.

My 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"]

Я получаю предупреждение:

warn Заменить опцию браузеров Autoprefixer в конфигурацию списка браузеров. Используйте ключ browserslist в файле package.json или .browserslistrc.

Использование опции браузеров может вызвать ошибки. Конфигурация списка браузеров может использоваться для 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 gatsby postcss autoprefixer cross-browser
person EliteRaceElephant    schedule 11.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В моем файле gastby-config.js

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


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

У меня есть отдельный файл .browserslistrc для параметров браузера. Проверьте свои зависимости, но отдельная установка npm списка браузеров не требуется.

person AndyW    schedule 14.03.2021