Static assets

Referencing assets

It is straight forward to reference assets from application scripts and stylesheets.

With an alias

You can use aliases to reference common directories. bud.js comes configured with a built-in @src alias, but more can easily be added. See the bud.alias documentation for more information on this function.

js

src/scripts/app.js

import src from '@src/images/image.png'

const el = document.createElement('img')
el.src = src
document.body.appendChild(el)

css

body {
  background: url(@src/images/image.png);
}

This is an excellent choice since it provides a lot of flexibility and makes managing asset paths less of a maintenance burden over time.

Using a relative path

Assets can be referenced using an a relative path.

js

src/scripts/app.js

import src from '../images/image.png'

css

body {
  background: url('../images/image.png');
}

Using an absolute path

Assets can be referenced using an absolute path. The root url is the @src directory.

js

src/scripts/app.js

import src from '/images/image.png'

css

body {
  background: url('/images/image.png');
}

Inlining assets

You can inline assets using the ?inline uri query parameter.

js

import icon from '@src/svg/icon.svg?inline'

css

body {
  background: url('@src/svg/image.svg?inline');
}

Optimizing assets

Images can be minimized using the @roots/bud-imagemin extension. Check out its documentation to get started.