Sass export to javascript

Hello friends, I want to export sass variables to my javascript file, however, I get an empty object returned.

This is how my webpack.mix.js looks like:

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

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

mix.sass('resources/sass/cms.scss', 'public/css');

mix.webpackConfig({
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "sass-loader"
            }]
        }]
    }
});

This is my variables.scss

$dark_theme: false !default;
$admin_dashboard_bg: #f8f9fc !default;

@if $dark_theme {
    $admin_dashboard_bg: rgb(26, 27, 35);
}

:export {
    darkTheme: $dark_theme;
}

And this is my app.js

import variables from '../sass/variales.scss';

$(document).ready(function(){
    console.log(variables);
});

But as I said, console.log returns an empty object and my compiler gives no error. Is their a way to debug this problem and find the solution? Maybe am I missing something?