質問者さんのおっしゃる通り、そのファイルでは
@import '@/assets/styles/mixin.scss';
は
@import '../assets/styles/mixin.scss';
と同じ意味だと思われます。この@
が何なのかは、webpackの設定ファイルを見れば答えが載っているかと思います。
これはwebpackでパスに対するエイリアスを指定しているものと思われます。つまり、@
と書いてあったらプロジェクトのルートディレクトリを指すように設定しているのです。恐らく、そのファイルの場合は@
が指し示す位置が..
と同じなので、質問者さんの考察のようになるのではないかと思います。
このように設定することの利点は、どの位置のファイルからでも同じ方法でプロジェクトのルートディレクトリを参照できることです。../assets/styles/mixin.scss
のように通常の相対パスを使うと、ファイルの位置によって..
の数を変えなければいけなくなり面倒です。
エイリアスとして@
を使わなければいけない理由はありませんが、ファイル名などに使われることが少なく他と混同されにくいことから選ばれているのではないかと思います。このような設定はvue.jsのプロジェクトで多く見られますが、Vue CLI 2時代のwebpackテンプレートでこのような設定が採用されていたことが理由だと考えられます。