scss の設定、コンパイル

Question

Reactのサイトを作成しており、scssを利用しようとしております。
初めてゼロから設定してみましたが、必要なものは全てインストールできたと思うので、
設定に不足があると思っています。
コンパイルの部分が、きちんと理解できておらず、そこがうまくいっていないと思うのですが、
確認すべき箇所がありましたらご指摘、アドバイスいただけますと助かります。

これまでやったこと:

1. styles.scssファイルを作成し、scss設定を書く。
2. gulpfile.js を作成し、必要なものをインストールする。

参考にしたページ:
https://taroken.org/react-gulp-scss-router/

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap');

.NavBar{
  display: flex;
  background-color: black;
}

.SignUp{
  button {
    width: 112px;
    height: 44px;
    color: white;
    border-radius: 5px;
    border: solid 2px ;
    border-color: #FEC033;
    text-align: center;
  }

const gulp = require('gulp');
const sass = require('gulp-sass')(require('node-sass'));
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');

gulp.task('default', (cb) => {
	// Compile Styles
	exec('npm run styles', function(err, stdout, stderr) {
		console.log(stdout);
		console.log(stderr);
		cb(err);
	});
	// Compile REACT
	exec('npm run dev:webpack', function(err, stdout, stderr) {
		console.log(stdout);
		console.log(stderr);
		cb(err);
	});
	// SERVE BACKEND
	nodemon({
	 script: 'server.js',
	 env: { 'NODE_ENV': 'development'}
 });
 // SERVE  FRONT END WITH PROXY TO BACKEND
	browserSync.init({
	 proxy: {
		 target: 'http://localhost:8000',
		 ws: true
	 },
	 serveStatic: ['./public']
	});
	// SET UP WATCJERS TO LISTEN TO CHANGES IN FILES
	gulp.watch('./src/scss/*',  gulp.task('styles'));
	gulp.watch('./src/components/**/*', gulp.task('webpack'));
	gulp.watch('./src/pages/**/*', gulp.task('webpack'));
	gulp.watch('./src/router/**/*', gulp.task('webpack'));
	gulp.watch('./src/*', gulp.task('webpack'));
	// LISTEN FOR WHEN TO RELOAD PAGES
	gulp
		.watch([
			'./public/**/*',
			'./public/*',
			'./public/js/**/.#*js',
			'./public/css/**/.#*css',
			'./src/**/*'
		])
		.on('change', reload);
		cb()
});

// This is compiles our styles
gulp.task('styles', (cb) => {
	gulp
		.src('src/scss/*.scss')
		.pipe(
			sass({
				outputStyle: 'compressed'
			}).on('error', sass.logError)
		)
		.pipe(
			autoprefixer({
				cascade: false
			})
		)
		.pipe(gulp.dest('./public/css'))
		.pipe(browserSync.stream());
		cb()
});


// This is for the development build
gulp.task('webpack', cb => {
	exec('npm run dev:webpack', function(err, stdout, stderr) {
		console.log(stdout);
		console.log(stderr);
		cb(err);
	});
});

// This is for the production build
gulp.task('build', cb => {
	exec('npm run build:webpack', function(err, stdout, stderr) {
		console.log(stdout);
		console.log(stderr);
		cb(err);
	});
});