@astropub/config-to-alias

Config to Alias

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

Usage

Install Config to Alias.

npm install @astropub/config-to-alias

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

import { defineConfig } from 'astro/config'
import configToAlias from '@astropub/config-to-alias/astro'

export default defineConfig({
  integrations: [
    configToAlias()
  ]
})

That’s it!

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

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src:*": ["src/*"]
    }
  }
}

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

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

... and CSS files, too!

@import 'src:styles/shared.css'

Usage with Vite

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

import { defineConfig } from 'vite'
import configToAlias from '@astropub/config-to-alias/vite'

export default defineConfig({
  plugins: [
    configToAlias()
  ]
})

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.