# gatsby-plugin-alias-imports

> Gatsby plugin for aliasing path locations when importing files.

Latest version **1.0.5** (published 2018-12-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-plugin-alias-imports
pnpm add gatsby-plugin-alias-imports
yarn add gatsby-plugin-alias-imports
bun add gatsby-plugin-alias-imports
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2018-12-24 |
| First published | 2018-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Rowan Freeman |
| Maintainers | rowanfreeman |
| Keywords | gatsby, gatsby-plugin, alias, import |

## Links

- npm: https://www.npmjs.com/package/gatsby-plugin-alias-imports
- Repository: https://github.com/rowanfreeman/gatsby-plugin-alias-imports
- Homepage: https://github.com/rowanfreeman/gatsby-plugin-alias-imports#readme
- Issues: https://github.com/rowanfreeman/gatsby-plugin-alias-imports/issues
- npm.io page: https://npm.io/package/gatsby-plugin-alias-imports

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.2.0

## Recent versions

- 1.0.5 (latest) — 2018-12-24
- 1.0.4 — 2018-12-21
- 1.0.3 — 2018-12-21
- 1.0.2 — 2018-12-21
- 1.0.1 — 2018-12-20
- 1.0.0 — 2018-12-20

## README

# gatsby-plugin-alias-imports

This Gatsby plugin is a wrapper around the webpack feature for aliasing in your import statements.

So you can do

```javascript
import '@components/navbar'
```

Instead of

```javascript
import '../../components/navbar.js'
```

This works by simply injecting the options into Webpack using `onCreateWebpackConfig`.

## Install

`npm i --save gatsby-plugin-alias-imports`

`yarn add gatsby-plugin-alias-imports`

## How to use

Add the plugin to your Gatsby config.

```javascript
{
  plugins: [
    {
      resolve: `gatsby-plugin-alias-imports`,
      options: {
        alias: {},
        extensions: []
      }
    }
  ]
}
```

## Options

### alias

Alias should be an object that takes multiple key/value pairs.

The **key** should be the **alias** and the **value** is the **path**.

The path that you specify can be relative to the root directory or absolute.

To use an **absolute directory**, you can do something like

```javascript
const path = require('path')

// [ ... ]

alias: {
  "@components": path.resolve(__dirname, 'src/components')
}
```

### extensions

The **extensions** allows you to omit extensions when importing files.

It is an array of desired extensions to auto-find.

E.g. `js`, `css`, `sass`, `md`

## Example

### gatsby-config.js

```javascript
{
  plugins: [
    {
      resolve: `gatsby-plugin-alias-imports`,
      options: {
        alias: {
          "@src": "src",
          "@components": "src/components",
          "@layouts": "src/layouts",
          "@pages": "src/pages",
          "@sass": "src/sass",
          "@templates": "src/templates",
          "@posts": "content/posts",
        },
        extensions: [
          "js",
        ],
      }
    }
  ]
}
```

### index.js

```javascript
import Layout from '@layouts/main'
import { ComponentA, ComponentB } from '@components/myfile'
```

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

---
_Source: https://npm.io/package/gatsby-plugin-alias-imports · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._