Webpack: postcss-loader игнорирует конфигурационный файл

Question

В настоящее время у меня есть следующая конфигурация webpack, которая отлично работает:

{
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',
    plugins: () => [
      require('postcss-flexbugs-fixes'),
      autoprefixer({
        browsers: [
          '>1%',
          'last 4 versions',
          'Firefox ESR',
          'not ie < 9', // React doesn't support IE8 anyway
        ],
        flexbox: 'no-2009',
      }),
    ],
  },
},

Поскольку я использую конфигурацию postcss в нескольких местах, я хочу централизовать ее в файле postcss.config.js.

Мой конфиг веб-пакета становится:

{
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',
    config: {
      path: './postcss.config.js'
    },
  },
}

Мой файл postcss.config.js находится в той же папке конфигурации и выглядит так:

module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'autoprefixer': {
      browsers: [
        '>1%',
        'last 4 versions',
        'Firefox ESR',
        'not ie < 9', // React doesn't support IE8 anyway
      ],
      flexbox: 'no-2009',
    }
  }
}

Сейчас сборка все еще работает, но кажется, что конфигурация postcss игнорируется (когда я проверяю css, префикса вендора больше нет). Я что-то здесь упускаю? Документация postcss не очень полезна...

Answer 1

Попробуйте это:

Первый в webpack:

{
  loader: 'postcss-loader',
  options: {
    config: {
      path: `${__dirname}/postcss.config.js`,
    },
  },
}

И тогда в вашем postcss.config.js файл:

module.exports = {
  ident: 'postcss',
  syntax: 'postcss-scss', /*install "postcss-scss" for SCSS style */
  map: false, /*its depends on your choice*/
  plugins: {
    'postcss-flexbugs-fixes': {},
    'autoprefixer': {
      browsers: [
        '>1%',
        'last 4 versions',
        'Firefox ESR',
        'not ie < 9',
      ],
      flexbox: 'no-2009',
    }
  }
}

Это работает для меня. Если есть проблемы, скажите мне