bud.alias

bud.alias is a helper function for creating aliases. Unlike paths, aliases may be used in your application scripts and stylesheets.

Aliases must be absolute, so it makes sense to use bud.path when defining them:

bud.alias('@components', bud.path('@src/components'))

Now, in application scripts or stylesheets you can use that alias in import statements to reference the components directory:

import {Dropdown} from '@components/dropdown'

You can also use them in .css files:

.dropdown {
  background: url(@components/dropdown/dropdown.png);
}

Predefined aliases

Out-of-the-box you can reference your source directory with @src and output directory with @dist.

alias	bud.path	filesystem path
@src	@src	`[project]/src`
@dist	@dist	`[project]/dist`

The naming of bud.alias handles is not restrictive the way it is with bud.path. You are free to start an alias with any character you like.

One popular convention is to reference the source directory with @:

bud.alias('@', bud.path('@src'))

Now, any source asset can be easily referenced from the source root:

import {Dropdown} from '@/components/dropdown'

Users of the @roots/sage extension will find a number of preset paths are available out-of-the-box: