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

如何将.scs文件转换为.css文件，同时将（CopyWebpackPlugin（）{}）文件复制到dist/文件夹，但我无法理解。

使用复制网页包插件版本--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;

---

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

因此，如果我理解得很好，您的jsx/js仍然有对scss文件的引用，这些文件不存在于dist文件夹中，因为所有scss都像普通css一样分发？对吗？非常有趣的问题，可能是extracttext插件用*.css搜索/替换所有导入的.scs。不管怎样，我都会追问这个问题的答案……是的，没错！