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

[Docs] Added an "Aliases" page under Guides. [En] (#1042)

Browse source 
* Styled the dark version for the search bar. Changed some stlyes for both themes.

* [Docs] Added an "Aliases" page under Guides. [EN]

* [Docs] Added "Aliases" page under Guides. Removed styles from another PR.

* Revert theme.css.

* Revert Search.css.

* Edited the text.

Co-authored-by: Peter Singh <drgaud@hotmail.com>

* Text edits after review.

* Apply suggestions from documentation review.

Co-authored-by: Fred K. Schott <fkschott@gmail.com>

Co-authored-by: V. Tinev <vtinev@2create.studio>
Co-authored-by: Peter Singh <drgaud@hotmail.com>
Co-authored-by: Fred K. Schott <fkschott@gmail.com>
This commit is contained in:
V. Tinev 2021-08-06 23:46:09 +03:00 committed by GitHub
parent c6b486e4bd
commit 2da7078eff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/src/config.ts
View file

@ -20,6 +20,7 @@ export const SIDEBAR = {
{ text: 'Data Fetching', link: 'guides/data-fetching' },
{ text: 'Markdown', link: 'guides/markdown-content' },
{ text: 'Supported Imports', link: 'guides/imports' },
{ text: 'Aliases', link: 'guides/aliases' },
{ text: 'Deploy a Website', link: 'guides/deploy' },
{ text: 'Publish a Component', link: 'guides/publish-to-npm' },

61
docs/src/pages/guides/aliases.md Normal file
View file

@ -0,0 +1,61 @@
---
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.
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.
> **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.
```ts
// snowpack.config.mjs
export default {
alias: {
components: './src/components',
'~': './src',
},
plugins: ['@snowpack/plugin-dotenv'],
workspaceRoot: '../',
};
```
To **add your own** alias just define it on a new line, like so:
```ts
// snowpack.config.mjs
export default {
alias: {
components: './src/components',
'~': './src',
'@public': './public' // This can be virtually anything
},
plugins: ['@snowpack/plugin-dotenv'],
workspaceRoot: '../',
};
```
| 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'
```