summaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorGravatar FredKSchott <FredKSchott@users.noreply.github.com> 2021-08-06 20:47:15 +0000
committerGravatar GitHub Actions <actions@github.com> 2021-08-06 20:47:15 +0000
commitdfafbe54d7e313bebfd98f68b2eb2721633c5945 (patch)
treecccd0735f2fc6d0277708127d3e06a64bc654de1 /docs
parent2da7078eff28b329987fa1a9ae2d37ed38a46e04 (diff)
downloadastro-dfafbe54d7e313bebfd98f68b2eb2721633c5945.tar.gz
astro-dfafbe54d7e313bebfd98f68b2eb2721633c5945.tar.zst
astro-dfafbe54d7e313bebfd98f68b2eb2721633c5945.zip
[ci] yarn format
Diffstat (limited to 'docs')
-rw-r--r--docs/src/pages/guides/aliases.md17
1 files changed, 7 insertions, 10 deletions
diff --git a/docs/src/pages/guides/aliases.md b/docs/src/pages/guides/aliases.md
index 818578e2c..b8e6b75d7 100644
--- a/docs/src/pages/guides/aliases.md
+++ b/docs/src/pages/guides/aliases.md
@@ -3,15 +3,15 @@ layout: ~/layouts/MainLayout.astro
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"`.
## 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.
@@ -26,7 +26,6 @@ export default {
plugins: ['@snowpack/plugin-dotenv'],
workspaceRoot: '../',
};
-
```
To **add your own** alias just define it on a new line, like so:
@@ -38,24 +37,22 @@ export default {
alias: {
components: './src/components',
'~': './src',
- '@public': './public' // This can be virtually anything
+ '@public': './public', // This can be virtually anything
},
plugins: ['@snowpack/plugin-dotenv'],
workspaceRoot: '../',
};
-
```
-| Key | Value |
-| ----- | ----- |
+| Key | Value |
+| --------------------------- | ---------------------------------- |
| The keyword you'll be using | The path it will get replaced with |
## Usage
-
Now just use the **defined** aliases in a file of your choice:
```js
import '@public/assets/logo.svg';
-import MyComponent from 'components/MyComponent/MyComponent.tsx'
+import MyComponent from 'components/MyComponent/MyComponent.tsx';
```