not effected by _variables.scss

An old a strange issue about changing bg-color and etc it is that when I run npm run dev it compiles and app.css changes the bg-color but using MAMP does not afftected at all even with the !import color the bg-color at localhost. That issue solved months ago but after copied the project I get the same issue again.

webpack:

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
    .react()
    .sass('resources/sass/app.scss', 'public/css')

_variables.scss

// Body
$body-bg: red;

// Typography
$font-family-sans-serif: "Nunito", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

app.scss

/ Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

The only problem that appeared at app.css is:

at-rule or selector expected