Bundling react + typescript + sass

Question

我正在尝试使用typescript和scss构建一个react项目。 我想最后将它捆绑到1个js文件中。 但问题是我需要使用scss作为变量，所以我将它包含在我的.tsx文件中：

import styles from './main.module.scss';

并像这样使用它：

<div className={styles.flex} />

我成功地可以使用来自here的回答来转换typescript文件并在没有css的情况下连接它们。 但是使用scss，当我执行所有操作以捆绑它失败的所有操作时出现错误：

events.js:183
      throw er; // Unhandled 'error' event
      ^
Error: module "./main.module.scss" not found from "[path..]"

显然，文件夹中没有.scss文件，它正在尝试uglify .js文件。但是如何让它理解包含scss文件并将其转换为正确的js？我需要一个webpack.config文件吗？如果是，请帮助配置？

我的tsconfig：

{
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "types": [
      "es6-promise",
      "webpack-env"
    ],
    "lib": [
      "es5",
      "es6",
      "es2016",
      "dom",
      "es2015.collection"
    ]
  }
}

我的gulpfile：

const clean = require('gulp-clean');
const gulp = require("gulp");
const ts = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const browserify = require('gulp-browserify');
const scss = require('gulp-scss');


gulp.task('clean', function () {
    return gulp
        .src([
            './tmp/',
            './dist/'
        ], {read: false})
        .pipe(clean());
});

gulp.task('compile-scss', [], function () {
    gulp.src(
        "src/**/*.scss"
    ).pipe(scss())
        .pipe(gulp.dest("./tmp/js"));
});

gulp.task('compile-ts', ['clean', 'compile-scss'], function () {
    let tsproject = ts.createProject('./tsconfig.json');
    return tsproject
        .src()
        .pipe(sourcemaps.init())
        .pipe(tsproject()).js
        .pipe(sourcemaps.write('./sourcemaps'))
        .pipe(gulp.dest('./tmp/js'));
});

gulp.task('min-js', ['compile-ts'], function () {
    return gulp
        .src('./tmp/js/index.js')
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(browserify())
        .pipe(uglify())
        .pipe(concat('App.min.js'))
        .pipe(sourcemaps.write('./sourcemaps'))
        .pipe(gulp.dest('./dist/js'))
});