https://github.com/luanbitar/gatsby-alias-imports

All your folders inside ir project will have alias by default
https://github.com/luanbitar/gatsby-alias-imports

alias aliases gatsby gatsby-plugin javascript js npm npm-package plugin react reactjs webpack

Last synced: 4 days ago
JSON representation

All your folders inside ir project will have alias by default

• Host: GitHub
• URL: https://github.com/luanbitar/gatsby-alias-imports
• Owner: luanbitar
• Created: 2019-12-04T00:33:09.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2023-10-11T00:07:29.000Z (about 1 year ago)
• Last Synced: 2024-04-26T01:41:21.464Z (7 months ago)
• Topics: alias, aliases, gatsby, gatsby-plugin, javascript, js, npm, npm-package, plugin, react, reactjs, webpack
• Language: JavaScript
• Homepage: https://www.gatsbyjs.org/packages/gatsby-alias-imports/?=alias#gatsby-alias-imports
• Size: 108 KB
• Stars: 16
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
[![Version](https://img.shields.io/npm/v/gatsby-alias-imports.svg)](https://www.npmjs.com/package/gatsby-alias-imports)

[![Downloads Total](https://img.shields.io/npm/dt/gatsby-alias-imports.svg)](https://www.npmjs.com/package/gatsby-alias-imports)

# 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"

```

## Install

`$ npm i gatsby-alias-imports`

or

`$ yarn add gatsby-alias-imports`

## How to use

Add the plugin to your `gatsby-config.js`.

```javascript

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:

```javascript

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

```javascript

module.exports = {

  plugins: [

    {

      resolve: `gatsby-alias-imports`,

      options: {

        rootFolder: `app`

      }

    }

  ]

}

```

## Further reading

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

[1]: https://webpack.js.org/configuration/resolve/#resolve-alias