CODEWITHSUNDEEP
reactjswebpackpostcssautoprefixerpostcss-loader
Fab313
Fab313

Reputation: 2288

Webpack: postcss-loader is ignoring config file

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...

Upvotes: 3

Views: 3936

Answers (1)

AmerllicA
AmerllicA

Reputation: 32472

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

Upvotes: 7

Related Questions