reactjs / Webpack 3 - 如何将scss编译成单独的css文件？

Question

如何将.scss文件（copyWebpackPlugin（）{}）复制到dist /文件夹时将.scss转换为.css文件，但我无法弄明白。

使用copy-webpack-plugin version --- 4.0.1

我的包结构就是这样，我试图将我的* .scss文件复制到* .css，我需要在其中转换文件。

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

依旧......

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

我的webpack.config看起来像..

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;

我做错了什么，请建议我如何实现？