Aliases

The project utilizes a set of aliases that is meant to simplify calling modules, styles, or components from anywhere in the code base where the build system's transpilation process is involved. This generally means any file that will end up in the /build folder.

The aliases are as follows:

• @vars.scss - refers to /assets/styles/vars.scss file.
• @utils.scss - refers to /assets/styles/utils.scss file.
• @Icons - refers to /assets/icons folder.
• @Components - refers to /components folder.
• @Directives - refers to /directives folder.
• @Helpers - refers to /helpers folder.
• @Utils - refers to /utils folder.
• @Styles - refers to /assets/styles folder.

These are prescribed in vite.config.ts's resolve key. The naming convention is to include file extension if it's an alias for file, and to exclude file extension for folder.

Usage

To use it, simply refer to it by its prescribed key if it's file, or append the intended file after it if it's folder. For example:

// referring to aliased file vars.scss in a component:
<style lang="scss">
@import '@vars.scss';
// instead of @import '../../assets/styles/vars.scss'

// rest of style
</style>

And for folders:

// referring to aliased /components folder in a comopnent:
<script lang="ts">
import CiIcon from '@Components/icon/Icon.vue'
// instead of `import CiIcon from '../../icon/Icon.vue';
</script>