webpack with less and postcss autoprefixer

Question

I\'m new to webpack and I\'m trying to set everything up to work on a react project. I have managed to get everything working in webpack as expected but have hit a road bloc

Answer 1

I had the same problem and I fix it properly, but in my config, I used PostCSS with SCSS style. Clone and see PostCSS configuration on Webpack, it is so simple and works properly. I do not write my Webpack configs here because it is hard to read and use. Undoubtedly I didn't use separate PostCSS config file. simply you can write PostCSS configs inside Webpack configuration file. I preferred to separate Development and Production version of Webpack. See and if there is question please ask. I will be glad to answer.

Answer 2

I struggled on the same kind of problem and found a solution. I also went through the process of applying autoprefixer which didn't work and didn't display any error message either.

I don't know if my solution will solve your problem, but let's give it a try. I tried to transpile scss code, which basically is the same process as transpiling less code.

I defined neither a postcss.config.js nor a .browserlistrc file. Instead, in the webpack.config.js, I first

const autoprefixer = require('autoprefixer');

Then, I set the following configuration in the webpack.config.js (this here would be the equivalent for less):

module: {
  rules: [
    // ... other rules ... 
    { 
      test: /\.less$/,
      loader: ExtractTextPlugin.extract(['css-loader',
      {
        loader: 'postcss-loader',
        options: {
          plugins: () => autoprefixer({
            browsers: ['last 3 versions', '> 1%']
          })
        }
      }, 'less-loader'])
    }
  // ... other rules ...
  ]
}, 
plugins: [
   // ... other plugins ...
   new ExtractTextPlugin({
    filename: '[name].css',
    allChunks: true,
  })
  // ... other plugins ...
]

As far as I understand from the huge amount of forums I looked for that piece of information, it is crucial that the loader order be 'css-loader', 'postcss-loader', and then 'less-loader'. In my particular case, it didn't work at all without the option

{
  browsers: ['last 3 versions', '> 1%']
}    

Hope this helps...