プログラム初心者です。
Qiitaなどでいつもgithubでpushしている方のソースコードを読む日々なのですが、
以下に示している@の存在の意味がよくわかっていません。
@import '@/assets/styles/mixin.scss';
アドレスに示している@は何を意味しているのでしょうか。
一見考えたところ、私の考察では、以下と同じようにも思いますがよろしかったでしょうか。
@import '../assets/styles/mixin.scss';
質問者さんのおっしゃる通り、そのファイルでは
@import '@/assets/styles/mixin.scss';
は
@import '../assets/styles/mixin.scss';
と同じ意味だと思われます。この@
が何なのかは、webpackの設定ファイルを見れば答えが載っているかと思います。
これはwebpackでパスに対するエイリアスを指定しているものと思われます。つまり、@
と書いてあったらプロジェクトのルートディレクトリを指すように設定しているのです。恐らく、そのファイルの場合は@
が指し示す位置が..
と同じなので、質問者さんの考察のようになるのではないかと思います。
このように設定することの利点は、どの位置のファイルからでも同じ方法でプロジェクトのルートディレクトリを参照できることです。../assets/styles/mixin.scss
のように通常の相対パスを使うと、ファイルの位置によって..
の数を変えなければいけなくなり面倒です。
エイリアスとして@
を使わなければいけない理由はありませんが、ファイル名などに使われることが少なく他と混同されにくいことから選ばれているのではないかと思います。このような設定はvue.jsのプロジェクトで多く見られますが、Vue CLI 2時代のwebpackテンプレートでこのような設定が採用されていたことが理由だと考えられます。
こんにちは。Faily Feelyさんの回答に対する補足回答です。回答にある通り、@
は、ルートディレクトリを示すことができるショートカットのようなものです。示してくれた例の他にも、ディレクトリの階層が深い場所にあるファイルから、ルートに近いファイルを import
するときなどにも便利に使えます。
webpack の設定ファイルの名前から推測して、おそらくそのプロジェクトは、@vue/cli-init を使用してセットアップしたものだと思います。これは、Vue.js プロジェクトが提供してくれているツールで、Vue.js に適した基本設定が施されたプロジェクトのひな形を自動生成してくれる便利なツールです。以下のコマンドでこのツールをインストールし、ひな形生成コマンドを実行すると、webpack と Vue.js の設定済みのプロジェクトのひな形を生成できます。
$ npm install -g @vue/cli @vue/cli-init
$ vue init webpack
webpack で import のショートカット (エイリアス) を設定するには、Resolve というオプションを使用します。このオプションは、おそらく webpack.base.conf.js
の中にあります。私の環境では、次のような設定が見つかりました。(設定ファイルのあるディレクトリの中を @
というキーワードで検索してみると、見つけやすいと思いますよ。)
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
ここに書かれている '@': resolve('src'),
は、「import
文の文字列が @
で始まっていた場合、src/
というディレクトリからのパスとして扱う」という意味になります。