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

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

{
  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 не очень полезна...


webpack reactjs postcss postcss-loader autoprefixer
person Fab313    schedule 09.02.2018    source источник
comment
Вы пробовали без объявления пути? Если ваш postcss.config.js находится в том же каталоге, что и конфигурация веб-пакета, он должен обнаружить его по умолчанию.   -  person Dyo    schedule 09.02.2018
comment
@Dyo Да, я тоже пробовал, но безрезультатно.   -  person Fab313    schedule 09.02.2018
comment
Вы все еще объявляете loader: require.resolve('postcss-loader') в веб-пакете, верно?   -  person Dyo    schedule 09.02.2018
comment
Да (я только что отредактировал свой пост)   -  person Fab313    schedule 09.02.2018
comment
такая же проблема, и postcss конфиг github бесполезен   -  person AmerllicA    schedule 27.04.2018

Ответы (1)


arrow_upward
4
arrow_downward

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

Сначала в 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',
    }
  }
}

Это работает для меня. Если возникнут проблемы, сообщите мне

person AmerllicA    schedule 27.04.2018