Как мне использовать переменные sass в моих компонентах vue?

Question

Я использую Laravel 6.0 и хочу использовать переменные sass в стиле компонентов Vue. Я проверил этот пост

https://serversideup.net/using-sass-vue-components-laravel-mix/

, чтобы импортировать мои ресурсы / sass / _variables.scss в мои компоненты Vue, но когда я это делаю, я получаю ошибку командной строки от npm run watch-poll

@import "~@/_variables.scss";
       ^
      Can't find stylesheet to import.

Я пробовал оба ~ @ / и ~ @. Я также добавил

@import 'variables';

в мой app.scss. Это мой webpack.mix.js

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

mix.js("resources/js/app.js", "public/js")
    .webpackConfig({
        resolve: {
            alias: {
                "@": path.resolve("resources/sass")
            }
        }
    })
    .sass("resources/sass/app.scss", "public/css");

А это мой компонент Vue

<template>
    <header>
        <p class="title">Dm Toolkit</p>
    </header>
</template>

<script>
export default {
    name: "main-header"
};
</script>

<style lang="scss">
@import "~@/_variables.scss";
header {
    display: flex;
    align-items: center;
    height: 50px;
    text-align: left;
    color: white;
    font-size: 20px;
    padding-left: 30px;
    background-color: $primary;
    -webkit-box-shadow: 0 10px 30px 0 rgba(233, 157, 95, 0.4);
    box-shadow: 0 10px 30px 0 rgba(233, 157, 95, 0.4);
}

.title {
    margin: 0px;
    line-height: 0px;
}
</style>