Webpack alias resolver to gatsby
npm install gatsby-alias-imports

Webpack feature for aliasing in your import statements, just import this plugin and all of your folders inside your src will be available with aliases.
``javascript`
import "styles/layout.css"
import Header from "components/Header"
Instead of
`javascript`
import "../../styles/layout.css"
import Header from "../components/Header/index.js"
$ npm i gatsby-alias-imports
or
$ yarn add gatsby-alias-imports
Add the plugin to your gatsby-config.js.
`javascriptgatsby-alias-imports
module.exports = {
plugins: [
`
]
}
Alias should be an object where the keys are alias and values are string to path on project
Example:
`javascriptgatsby-alias-imports
module.exports = {
plugins: [
{
resolve: ,src/styles
options: {
aliases: {
styles: ,config/
config: ,`
"@utils": "src/utils/"
}
}
}
]
}
The rootFolder it's in case you change your src folder name`javascriptgatsby-alias-imports
module.exports = {
plugins: [
{
resolve: ,app
options: {
rootFolder: ``
}
}
]
}
Check out the [resolve section][1] of the Webpack config documentation for more information.
[1]: https://webpack.js.org/configuration/resolve/#resolve-alias