Skip to main content

Handling assets

All paths in Loonar are relative to the file that you're currently working on. Loonar comes with a bunch of pre-defined aliases out-of-the box to avoid going back multiple times in the directory tree.

Static assets​

Loonar compiles only used assets and will put them in dist folder after build. Loonar won't look for assets usages in .php and .twig files or any other files than JavaScript or Sass.

If you want to use a static asset, which is not compiled by Loonar, you should add the .static suffix to the file name, just before the file extension.

assets/images
├── example-compiled-asset.svg        # won't be included in build unless used in .scss or .js file
└── example-static-asset.static.svg   # will be included in build at all times
Components/ExampleComponent/assets
├── example-compiled-asset.svg        # won't be included in build unless used in .scss or .js file
└── example-static-asset.static.svg   # will be included in build at all times

Relative assets​

If you were creating a component and using an asset from the assets folder within that component, you would use it like so:

.m-example-component {
  background-image: url('./assets/example-asset.png');
}

Global assets​

caution

You should not go back in the directory tree using multiple ../.

Sometimes you'll want to access global assets. Use the below aliases. Remember to prefix the path with ~@ for Sass files and @ for JavaScript files.

Example: Use Loonar core module​

Components/ExampleComponent/_style.scss
@use '~@loonar' as *;

Example: Get a global image​

Components/ExampleComponent/_style.scss
.m-example-component {
  // Sets you in the `assets/images` directory.
  background-image: url('~@images/assets/example-asset.png');
}

Example: Get a custom font​

assets/styles/config/typography/custom-fonts/_example-font.scss
@font-face {
  // Sets you in the `assets/fonts` directory.
  src: url('~@fonts/example-font.woff2') format('woff2');
}

Aliases​

There is a bunch of aliases bundled with Loonar which you might want to use.

AliasPath
~@loonarloonar-wp/node_modules/twoheads-design-code/loonar-core-scss
~@assetsloonar-wp/assets
~@componentsloonar-wp/Components
~@stylesloonar-wp/assets/styles
~@scriptsloonar-wp/assets/scripts
~@configloonar-wp/assets/styles/config
~@typographyloonar-wp/assets/styles/typography
~@elementsloonar-wp/assets/styles/elements
~@toolsloonar-wp/assets/styles/tools
~@adminloonar-wp/assets/styles/admin
~@animationloonar-wp/assets/styles/animation
~@imagesloonar-wp/assets/images
~@fontsloonar-wp/assets/fonts