diff options
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'; ``` |