Config to Alias

Config to Alias adds aliasing support to Astro, JavaScript, TypeScript, and CSS files.

Usage

Install Config to Alias.

1npm install @astropub/config-to-alias

Add Config to Alias to your astro.config.js.

1import { defineConfig } from 'astro/config'
2import configToAlias from '@astropub/config-to-alias/astro'
3
4export default defineConfig({
5  integrations: [
6    configToAlias()
7  ]
8})

That’s it!

Now, any aliases added to tsconfig.json or jsconfig.json ...

1{
2  "compilerOptions": {
3    "baseUrl": ".",
4    "paths": {
5      "src:*": ["src/*"]
6    }
7  }
8}

... can be used in JavaScript, TypeScript, and Astro files ...

1import * as utils from 'src:scripts/utils.astro'

... and CSS files, too!

1@import 'src:styles/shared.css'

---

Usage with Vite

Add Config to Alias to your vite.config.js.

1import { defineConfig } from 'vite'
2import configToAlias from '@astropub/config-to-alias/vite'
3
4export default defineConfig({
5  plugins: [
6    configToAlias()
7  ]
8})

---

Author’s Note

This integration exists as a standalone version of the vite-plugin-config-alias plugin built into Astro with additional support for CSS. At the time of writing, Astro has not added this functionality to core because my contributions are currently banned from being used in the project. As they do not yet have any process to appeal a ban, this plugin serves as a crutch.