reactjs / Webpack 3 - how to compile scss into a separate css file?

Question

How to convert the .scss to .css files while copying(CopyWebpackPlugin(){}) them to the dist/ folder but I’m not able to figure it out.

Using copy-webpack-plugin version --- 4.0.1

My package structure is like that, I'm trying to copy my *.scss file to *.css and I need to transform a file inside it.

         |-- App 
            |-- dist **//expected result**
              |-- sass
                |-- elements
                    |-- variables1.css
                    |-- variables2.css
                |-- common
                  |-- colours.css
            |--components
                |-- TextArea
                  |-- TextArea.css
                  |-- TextArea.js
                |-- user
                  |-- user.css
                  |-- user.js

and so on...

            |-- src
                |-- styles
                    |-- main.scss
                |-- sass
                    |-- elements
                        |-- variables1.scss
                        |-- variables2.scss
                    |-- common
                      |-- colours.scss
                |--components
                    |-- TextArea
                      |-- TextArea.scss
                      |-- TextArea.js
                    |-- user
                      |-- user.scss
                      |-- user.js
                |--components2
                    |-- TextArea2
                      |-- TextArea2.scss
                      |-- TextArea2.js
                    |-- user2
                      |-- user2.scss
                      |-- user2.js
                |-- index.js
            |-- app.js
            |-- webpack.config.js
            |-- karma.config.js
            |-- package.json

my webpack.config looks like ..

webpack.config.js

const webpack = require('webpack')
const path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

const config = {
  entry : {
    index:'./src/index.js'
  },
  output : {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    pathinfo: true
  },
  devtool: 'source-map',
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      loader: 'babel-loader'          
    }, {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract(['css-loader', 'resolve-url-loader', 'sass-loader'])
    }
  },
  plugins: [
    new ExtractTextPlugin({
      filename:  (getPath) => {
        return getPath('path of file/ScrollArea.scss').replace('css/js', 'css');
      },
      allChunks: true
    }), **// tried this way too ...but not working**
    new CopyWebpackPlugin([
      {
        from: 'path of file/ScrollArea.scss',
        to: 'path of file/ScrollArea.scss',
        toType: 'file',
        transform: function (content, path) {
            return content.toString('path of file/ScrollArea.css', '/');
        }
      }, **// tried this way too ...but not working**
      {
        from: 'path of file/TextArea.scss',
        to: 'path of file/TextArea.scss'
      },
      {
        from: 'path of file/Hint.scss',
        to: 'path of file/Hint.scss'
      }
    ]),
    new ExtractTextPlugin('/path of file/main.scss', {
       allChunks: true
    })
  ],
  externals: {
    'react/addons': true,
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true
  }
};

module.exports = config;

Am I doing something wrong, Please suggest me How can I achieve?