Webpack: postcss-loader is ignoring config file

Question

Currently I have the following webpack configuration, which works fine:

{
  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',
      }),
    ],
  },
},

Since I'm using the postcss configuration in several places, I want to centralize it in a postcss.config.js file.

My webpack config becomes :

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

My postcss.config.js file is in the same config folder, and looks like this:

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',
    }
  }
}

Now the build is still working, but it seems that the postcss config is ignored (when I inspect the css, the vendor prefix are no longer there). Am I missing something here ? The postcss documentation is not very helpful...

Have you tried without path declaration ? If your `postcss.config.js` is in the same directory as webpack config it should detect it by default. — Dyo, Feb 09 '18 at 14:37
You're still declaring `loader: require.resolve('postcss-loader')`, in webpack right ? — Dyo, Feb 09 '18 at 14:58

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

Try These:

First in webpack:

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

And then in your postcss.config.js file:

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',
    }
  }
}

This works for me. If have some problems tell me

Webpack: postcss-loader is ignoring config file

1 Answers1

Try These: