Error: No PostCSS Config found in '/home/react-project/workarea/scss'

Question

I am trying to load scss files in my reactjs app using webpack. Here is my webpack code:

module: { 
 rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader'
    },
  },
  {
    test: /\.(sa|sc|c)ss$/,
    use: [
      devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
      'css-loader',
      'postcss-loader',
      'sass-loader',
    ],
  }
 ]
},
plugins: [
 new HtmlWebpackPlugin({
   template: './src/index.html'
 }),
 new MiniCssExtractPlugin({
   filename: devMode ? '[name].css' : '[name].[hash].css',
   chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
 })
]

When I try to run this it throws me the above error.

Answer 1

This will be fixed if you either have postcss.config.js in root directory or inline if u have it options, For example

options: {
    plugins: (loader) => [
      require('autoprefixer')({
        browsers: [
          'last 2 versions',
          '> 1%',
        ], // browser options can be configured from https://github.com/browserslist/browserslist
      }),
    ],
  },