michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[ci] yarn format

Browse source
This commit is contained in:
FredKSchott 2021-08-06 20:47:15 +00:00 • committed by GitHub Actions
parent 2da7078eff
commit dfafbe54d7
1 changed files with 7 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
docs/src/pages/guides/aliases.md
View file

@ -3,15 +3,15 @@ layout: ~/layouts/MainLayout.astro
title: Aliases title: Aliases
--- ---
An **alias** is a handy shortcut for your JavaScript import paths. This can be a great option if you dislike long relative import paths with many repeating `../` segments. Define an **alias** in your project to import directly from some directory no matter how deeply nested a file is located. An **alias** is a handy shortcut for your JavaScript import paths. This can be a great option if you dislike long relative import paths with many repeating `../` segments. Define an **alias** in your project to import directly from some directory no matter how deeply nested a file is located.
With aliases, you can import from `"components/SomeComponent.astro"` instead of `"../../../../../components/SomeComponent.astro"`. With aliases, you can import from `"components/SomeComponent.astro"` instead of `"../../../../../components/SomeComponent.astro"`.
## Adding a custom alias ## Adding a custom alias
To add custom aliases to your project, located in the root of your project is the `snowpack.config.mjs` file. This configuration file contains the instructions for Astro's build tool [Snowpack](https://www.snowpack.dev/reference/configuration), on how to build out your Astro project. To add custom aliases to your project, located in the root of your project is the `snowpack.config.mjs` file. This configuration file contains the instructions for Astro's build tool [Snowpack](https://www.snowpack.dev/reference/configuration), on how to build out your Astro project.
> **Note:** some projects don't come with this file out of the box, feel free to create it yourself. [More on snowpack.config.mjs.](https://www.snowpack.dev/reference/configuration) > **Note:** some projects don't come with this file out of the box, feel free to create it yourself. [More on snowpack.config.mjs.](https://www.snowpack.dev/reference/configuration)
Inside the file you will notice that there are already some predefined aliases. Inside the file you will notice that there are already some predefined aliases.
@ -26,7 +26,6 @@ export default {
plugins: ['@snowpack/plugin-dotenv'], plugins: ['@snowpack/plugin-dotenv'],
workspaceRoot: '../', workspaceRoot: '../',
}; };
``` ```
To **add your own** alias just define it on a new line, like so: To **add your own** alias just define it on a new line, like so:
@ -38,24 +37,22 @@ export default {
alias: { alias: {
components: './src/components', components: './src/components',
'~': './src', '~': './src',
'@public': './public' // This can be virtually anything '@public': './public', // This can be virtually anything
}, },
plugins: ['@snowpack/plugin-dotenv'], plugins: ['@snowpack/plugin-dotenv'],
workspaceRoot: '../', workspaceRoot: '../',
}; };
``` ```
| Key | Value | | Key | Value |
| ----- | ----- | | --------------------------- | ---------------------------------- |
| The keyword you'll be using | The path it will get replaced with | | The keyword you'll be using | The path it will get replaced with |
## Usage ## Usage
Now just use the **defined** aliases in a file of your choice: Now just use the **defined** aliases in a file of your choice:
```js ```js
import '@public/assets/logo.svg'; import '@public/assets/logo.svg';
import MyComponent from 'components/MyComponent/MyComponent.tsx' import MyComponent from 'components/MyComponent/MyComponent.tsx';
``` ```