What does @ mean when @import?

As the questioner said, the file is

@import'@/assets/styles/mixin.scss';

is

@import'../assets/styles/mixin.scss';

It seems to have the same meaning as .If you look at the webpack configuration file to find out what this @ is.

This appears to be an alias for the path in webpack.In other words, @ is set to point to the root directory of the project.In the case of that file, the location indicated by @ is the same as .., so it may be like the questioner's consideration.

The advantage of this configuration is that you can browse the root directory of the project in the same way from any location file. If you use a normal relative path, such as ../assets/styles/mixin.scss, you will have to change the number of .. depending on the location of the file.

There is no reason to use @ as an alias, but I think it is chosen because it is rarely used for file names and is not easily confused with others.These settings are common in vue.js projects, probably because the Vue CLI2 era webpack template adopted them.

Note: Similar Questions in English Stack Overflow

Hello, this is a supplementary response to Mr. Fairy's response.As you can see in the answer, @ is like a shortcut that can point to the root directory. In addition to the example you gave, it is also useful to import files close to the root from files in the deep directory hierarchy.

Based on the name of the webpack configuration file, the project was probably set up using @vue/cli-init.This is a useful tool provided by the Vue.js project that automatically creates models for projects that have the right basic settings for Vue.js.You can install this tool with the following commands and execute the model generation command to generate models for your webpack and Vue.js configured projects:

$npm install-g@vue/cli@vue/cli-init
$ vue init webpack

To set the import shortcut (alias) in webpack, use the option Resolve.This option is probably located in webpack.base.conf.js.In my environment, I found the following settings:(If you search in the directory where the configuration file is located with the keyword @, it will be easy to find.)

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

'@':resolve('src'), means import statements begin with @, treating them as paths from the directory src/.