I know its importing a file but I don't know what the "@" stands for, I have seen a bunch of code snippets using this same syntax.
I tried implementing the same scenario in any way I thought could be possible but still no success
First you need to add babel-plugin-root-import in your devDependencies in package.json (If using yarn: yarn add babel-plugin-root-import --dev). Then in your .babelrc add the following lines into plugins key:
"plugins": [
[
"babel-plugin-root-import",
{
"rootPathPrefix": "@"
}
]
]
Now, you can use @. For example:
Instead of:
import xx from '../../utils/somefile'
You Can:
import xx from '@/utils/somefile'
They are webpack alias import, this configuration help to shorten your absolute/relative path.
Read more here: https://webpack.js.org/configuration/resolve/
This is used when you want to use Scope Packages.
What are Scope Packages? Ans - Scopes are a way of grouping related packages together, and also affect a few things about the way npm treats the package.