SASS suddenly stopped compiling

Question

I'm following a video creating a custom wordpress theme. Up until this point the styles in my _header.scss file were compiling properly and then just stopped working.

I'm using Visual Studio Code(which I restarted), MAMP and webpack. Every time I save a change I get the message that the Laravel Mix build was successful. No errors.

Here are the files that I think may help. Not sure how to troubleshoot this. Keep in mind this was working up until I tried styling the menu. Now nothing works. I can delete everything in this file and the page does not change in the browser.

_header.scss

header {
  background: $light;
  padding: 1rem 0;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);

  .logo {
    width: 150px;
  }

  .menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

}

app.scss

@import 'node_modules/bootstrap/scss/bootstrap';

@import 'colors';
@import 'header';

functions.php

<?php

// Style Sheets
function load_stylesheets() { 
  wp_register_style ('stylesheet', get_template_directory_uri() . '/style.css', '', 1, 'all');
  wp_enqueue_style('stylesheet');

  wp_register_style ('custom', get_template_directory_uri() . '/app.css', '', 1, 'all');
  wp_enqueue_style('custom');
}

add_action('wp_enqueue_scripts', 'load_stylesheets');

// Javascript scripts
function load_javascript() {  
  wp_register_script ('custom', get_template_directory_uri() . '/app.js', 'jquery', 1, true);
  wp_enqueue_script('custom');
}

add_action('wp_enqueue_scripts', 'load_javascript');

// Add Menus
add_theme_support('menus');

// Register Menus
register_nav_menus(
  array(
    'top_menu' => 'Top Menu',
  )
);

package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.19",
    "cross-env": "^7.0",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.13",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.15.2",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.11"
  },
  "dependencies": {
    "bootstrap": "^4.5.0",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  }
}

webpack.mix.js

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('src/app.js', './')
  .sass('src/app.scss', './');

Answer 1

Install better and best SCSS compiler then try again :( enter link description here

I hope it works or else let me know :)