Deep Dive

“The fastest auto dealership site in the world” Hundreds of hours of perf learnings, distilled

ContactSign Up for Free
Community Plugin
View plugin on GitHub

Version Downloads Total

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.

© 2022 Gatsby, Inc.