Webpack extract text plugin not generating a separate CSS file?

Question

I have one src/styles/main.scss file which I want to convert to build/styles/main.css and then use it in index.html.

I have been trying to setup webpack with text extractor plugin but unable to achieve the final result.

This is my directory structure:

project
 // build needs to be generated, as of now only js folder with index.js is generated
 - build
 - src
   - styles
     - main.scss
     - components
       - header.scss
   - js
     - stores
     // some other files
 - webpack.config.js

webpack.config.js

const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');

const BUILD_DIR = path.resolve(__dirname, 'build/js');
const APP_DIR = path.resolve(__dirname, 'src');

const config = {
  devtool: 'eval-source-map',
  entry: {
    "index": APP_DIR + '/js/index.jsx'
  },
  output: {
    path: BUILD_DIR,
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        include: APP_DIR,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract(
          'style-loader', // backup loader when not building .css file
          'css-loader!sass-loader'
        )
      },
      {
        test: /\.(jsx|js)?/,
        exclude: /node_modules/,
        include: APP_DIR,
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  plugins: [
    new ExtractTextPlugin("build/styles/main.css")
  ]
};

module.exports = config;