如何在vue组件中使用sass变量？

Question

我正在使用Laravel 6.0，我想在Vue组件样式中使用sass变量。我查看了这篇文章

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

将资源/sass/_variables.scss导入到Vue组件中，但是当我这样做时，我从npm收到命令提示符错误，请运行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>