Why won't my SCSS load even though it's in the webpack.mix.js in my Laravel project that's scaffolded with React.js?

Question

I'm not sure why my SCSS won't load inside my VideoBackground.js component even though it's in the webpack.mix.js file in my Laravel project that's scaffolded with React.js. The file path to the videoBackground.scss file that's declared inside the VideoBackground.js file's correct along with the paths declared inside webpack.mix.js .

Note: There's an app.scss file inside the sass folder that I believe that came out of the box upon scaffolding my Laravel project with React.js. Would I need to utilize this?

How can I fix my issue?

Here's my webpack.mix.js :

const mix = require('laravel-mix');

mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

mix.react('resources/js/components/VideoBackground/VideoBackground.js', 'public/js')
.sass('resources/sass/VideoBackground/videoBackground.scss','public/css');

Here's my VideoBackground.js component:

import React from 'react';
import '../../../sass/VideoBackground/videoBackground.scss';

function VideoBackground() {
   return(
    <>
      <h1 className="yo">yo</h1>
    </>
   );
}

export default VideoBackground;

Answer 1

app.scss is mostly used for scaffolding all your css and scss files. You include all your stylesheet files in app.scss and then in the webpack.mix.js you use app.scss to produce bundle public/app.css.

Also, in the master blade file you need to add your stylesheet tag (public/app.css) before your javascript tag and everything should be fine.