diff options
author | 2021-08-06 20:47:15 +0000 | |
---|---|---|
committer | 2021-08-06 20:47:15 +0000 | |
commit | dfafbe54d7e313bebfd98f68b2eb2721633c5945 (patch) | |
tree | cccd0735f2fc6d0277708127d3e06a64bc654de1 /docs | |
parent | 2da7078eff28b329987fa1a9ae2d37ed38a46e04 (diff) | |
download | astro-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.md | 17 |
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'; ``` |