Assets management

Assets are files (images, fonts or SVGs) referenced in stylesheets.

Why is assets managment included in the builder?

So that you can include in your build only the assets that are actually required by your application (i.e. files from unused modules are not included).

Managing assets

All urls on stylesheets should be relative to the stylesheet location. This also implies the assets should be stored near the stylesheets that require them. Avoid absolute paths!

The build tools does not support assets referenced via HTML tags (like <img> or <style> tags, for instance). Always use url() references in external CSS stylesheet files to apply images or fonts to your HTML pages.

When the assets are copied (or symlinked) to the release destination, the relative urls are preserved, so the required directory structure is automatically created and the assets are placed in folders that maintain the same location relative to the assembled release stylesheet.

Ex. in your module you have a file named styles.css containing:

button i {
  background: url('assets/module2/check_alt_32x32.png') no-repeat left center;
  width: 32px;
  height: 32px;
}

You should have a folder structure similar to this:

/src/module2
|  mycode.js
|  styles.css
|__assets
   |__module2
        check_alt_32x32.png

When your project is built in release mode, the build target folder becomes likes this:

/dist
|  projectname.js
|  projectname.css
|__assets
   |__module2 (*)
        check_alt_32x32.png

The folder marked with an asterisk is a symlink to the original /src/module2/assets/module2.

As you can see, it's important that the folder inside /assets be named with an unique name (usually the module's name) so that, when published, the files it contains do not collide with any other module's assets.