Frontend Assets

Barebones uses Vite to compile Sass and JavaScript source files into the assets that WordPress loads on the frontend and in the block editor.

Source files

  • Frontend source files live in assets/.
  • The main Sass entry point is assets/styles/style.scss.
  • The main JavaScript entry point is assets/scripts/scripts.js.
  • Block-specific assets live beside each block template in blocks/.

For example:

MD
blocks/split-content/
├── split-content.scss
└── split-content.js

Compiled files

Vite compiles the main theme assets into:

  • style.css: main frontend stylesheet
  • js/scripts.min.js: main frontend script

Editor styles are compiled into:

  • css/editor-styles.css: block editor stylesheet

Block assets are compiled into:

  • css/blocks/*.css: compiled block stylesheets
  • js/blocks/*.js: compiled block scripts

When using the block editor, WordPress will only load block stylesheets and scripts for those blocks that are rendered on the current page.

Terminal commands

Use the development command while editing Sass or JavaScript. This runs Vite in watch mode and recompiles files automatically when source assets change.

BASH
npm run dev

Before deployment, run the build command. This compiles production-ready assets.

BASH
npm run build

Sass structure

Sass source files are organised by purpose:

  • assets/styles/config/: variables, mixins, and shared configuration
  • assets/styles/base/: base element styles, typography, forms, images, lists, layouts, and grid
  • assets/styles/utils/: resets, helpers, defaults, and responsive utilities
  • assets/styles/components/: reusable components such as buttons, navigation, and alerts
  • assets/styles/layout/: site-wide layout styles such as header, footer, main, and sections
  • assets/styles/pages/: page-specific styles
  • assets/styles/admin/: editor and admin styles

The main stylesheet imports these partials from assets/styles/style.scss.

JavaScript structure

Theme-level JavaScript lives in assets/scripts/scripts.js.

Block-specific JavaScript should live inside the relevant block directory, for example blocks/split-content/split-content.js.

Block asset discovery

Vite automatically discovers block Sass and JavaScript files inside blocks/.

A block Sass file such as blocks/example-block/example-block.scss is compiled to css/blocks/example-block.css.

A block script such as blocks/example-block/example-block.js is compiled to js/blocks/example-block.js.

New block assets do not need to be manually added to vite.config.js when they follow the expected block structure.

WordPress loading

WordPress loads the compiled frontend assets from:

  • style.css
  • js/scripts.min.js

The editor stylesheet is loaded from css/editor-styles.css.

Block assets are referenced from each block’s block.json file, allowing WordPress to load the compiled CSS and JavaScript for registered blocks.

Asset versioning

Barebones versions assets using each file’s modification time.

When a compiled file changes, the version value changes too. This helps browsers load the latest CSS and JavaScript after a rebuild without manually updating version numbers.