sass的變量，只能組件需要的時候，以import的方式引入。
main.js中引入的sass文件，可以作為全局樣式。全局變量，在webpack看來，是無法識別的。

你的@在sass里面是無法使用的，獲取不到相應(yīng)的路徑，你換成相對路徑試試看

在組件中引入樣式看看

如果兼容性要求不是很高，可以考慮使用css變量(sass中可以使用)，用法如下：
css文件

@charset "UTF-8";
:root {
    --color: red;
}

main.js文件

reqiure('XXX/XXX/var.css')

vue文件中

#app {
    color: var (--color);
}