

プログラム初心者です。

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

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

[code]

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

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

[code]

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


CC BY-SA 4.0
2018-10-15T21:59:12.650
49318
2020-01-28T13:36:50.470
2018-10-16T04:52:11.517
754
30213
question
javascript css vue.js webpack
@importするときの@の意味


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

[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)


CC BY-SA 4.0
2018-10-16T02:22:41.837
49328
2018-10-16T05:00:47.740
2018-10-16T05:00:47.740
30079
30079
49318
answer


こんにちは。Faily Feelyさんの回答に対する補足回答です。回答にある通り、`@`
は、ルートディレクトリを示すことができるショートカットのようなものです。示してくれた例の他にも、ディレクトリの階層が深い場所にあるファイルから、ルートに近いファイルを
`import` するときなどにも便利に使えます。

webpack の設定ファイルの名前から推測して、おそらくそのプロジェクトは、[@vue/cli-init](https://cli.vuejs.org/)
を使用してセットアップしたものだと思います。これは、Vue.js プロジェクトが提供してくれているツールで、Vue.js
に適した基本設定が施されたプロジェクトのひな形を自動生成してくれる便利なツールです。以下のコマンドでこのツールをインストールし、ひな形生成コマンドを実行すると、webpack
と Vue.js の設定済みのプロジェクトのひな形を生成できます。

[code]

    $ npm install -g @vue/cli @vue/cli-init
    $ vue init webpack
    
[/code]

webpack で import のショートカット (エイリアス)
を設定するには、[Resolve](https://webpack.js.org/configuration/resolve/)
というオプションを使用します。このオプションは、おそらく `webpack.base.conf.js`
の中にあります。私の環境では、次のような設定が見つかりました。(設定ファイルのあるディレクトリの中を `@`
というキーワードで検索してみると、見つけやすいと思いますよ。)

[code]

      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },
    
[/code]

ここに書かれている `'@': resolve('src'),` は、「`import` 文の文字列が `@` で始まっていた場合、`src/`
というディレクトリからのパスとして扱う」という意味になります。


CC BY-SA 4.0
2018-10-16T15:24:22.707
49359
2020-01-28T13:36:50.470
2020-01-28T13:36:50.470
261
261
49318
answer