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.

import "styles/layout.css"
import Header from "components/Header"

Instead of

import "../../styles/layout.css"
import Header from "../components/Header/index.js"

Install

$ npm i gatsby-alias-imports

or

$ yarn add gatsby-alias-imports

How to use

Add the plugin to your gatsby-config.js.

module.exports = {
  plugins: [
    `gatsby-alias-imports`
  ]
}

Options

aliases

Alias should be an object where the keys are alias and values are string to path on project

Example:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-alias-imports`,
      options: {
        aliases: {
          styles: `src/styles`,
          config: `config/`,
          "@utils": "src/utils/"
        }
      }
    }
  ]
}

rootFolder

The rootFolder it's in case you change your src folder name

module.exports = {
  plugins: [
    {
      resolve: `gatsby-alias-imports`,
      options: {
        rootFolder: `app`
      }
    }
  ]
}

Further reading

Check out the resolve section of the Webpack config documentation for more information.