@importするときの@の意味


プログラム初心者です。

Qiitaなどでいつもgithubでpushしている方のソースコードを読む日々なのですが、

以下に示している@の存在の意味がよくわかっていません。

[code]

    @import '@/assets/styles/mixin.scss';　
    
[/code]

アドレスに示している@は何を意味しているのでしょうか。  
一見考えたところ、私の考察では、以下と同じようにも思いますがよろしかったでしょうか。

[code]

    @import '../assets/styles/mixin.scss';　
    
[/code]




質問者さんのおっしゃる通り、そのファイルでは

[code]

    @import '@/assets/styles/mixin.scss';
    
[/code]

は

[code]

    @import '../assets/styles/mixin.scss';
    
[/code]

と同じ意味だと思われます。この`@`が何なのかは、 **webpackの設定ファイル** を見れば答えが載っているかと思います。

これはwebpackでパスに対するエイリアスを指定しているものと思われます。つまり、`@`と書いてあったらプロジェクトのルートディレクトリを指すように設定しているのです。恐らく、そのファイルの場合は`@`が指し示す位置が`..`と同じなので、質問者さんの考察のようになるのではないかと思います。

このように設定することの利点は、どの位置のファイルからでも同じ方法でプロジェクトのルートディレクトリを参照できることです。`../assets/styles/mixin.scss`のように通常の相対パスを使うと、ファイルの位置によって`..`の数を変えなければいけなくなり面倒です。

エイリアスとして`@`を使わなければいけない理由はありませんが、ファイル名などに使われることが少なく他と混同されにくいことから選ばれているのではないかと思います。このような設定はvue.jsのプロジェクトで多く見られますが、[Vue
CLI 2時代のwebpackテンプレート](https://github.com/vuejs-
templates/webpack)でこのような設定が採用されていたことが理由だと考えられます。

参考：[英語版Stack
Overflowでの同様の質問](https://stackoverflow.com/questions/42749973/es6-import-
using-at-sign-in-path-in-a-vue-js-project-using-webpack)

