Compiling Assets

Bud is the primary project responsible for the asset workflow in Sage.

Bud is a wrapper for Webpack, and handles compiling stylesheets, checking for JavaScript errors, copying images and fonts, and concatenating and minifying files.

It also provides a fluent API that some find to be easier to interact with than Webpack itself.

# Available build commands

• yarn build — Build assets
• yarn dev — Build assets when file changes are made, start dev session

# Theme assets

What files are built and how is controlled from the bud.config.js file in the root of the theme.

In-depth discussion of how to configure Bud can be found in the Bud documentation, but Sage ships with a configuration that should provide a sufficient starting point—and depending on your use case, may not need any additional configuration.

The configuration will generate the following files:

• app.css - The primary stylesheet for the theme.
• app.js - The primary JavaScript file for the theme.
• editor.css - Styles used by the editor when creating/editing posts.
• editor.js - JavaScript for the block editor, i.e. block styles and variants.

It will also copy any files in the images or fonts directories under /resources/assets/ into the public directory with the other compiled files, but does not optimize or compress them.

# Images in template files

Use the @asset directive to call images from template files:

<img src="@asset('images/example.jpg')">

# Images in CSS

CSS files and images are sibling folders, so you can reference images in CSS:

.background {
  background-image: url("../images/image.jpg");
}

# Assets in PHP

In your PHP, you can make use of the \Roots\asset() function, which is what powers the @asset directive.

$asset = \Roots\asset('images/example.jpg');

// The public URI of the asset
echo $asset;
echo $asset->uri();

// The server path of the asset
echo $asset->path();

// The contents of the asset 
echo $asset->contents();