Hnnx/ViteWP

WordPress with Vite and sensible defaults.

Emigma starter theme

Under the hood

• ES6 for JavaScript
• SASS preprocessor for CSS following SASS Guidelines
• Bootstrap 5 as CSS framework (customizable with SASS)
• Vite.js to compile theme assets and provide live reload

Requirements

• Node (v20.11.1 Iron)

Usage

First, clone this repository in your WordPress themes directory.

Then, run the following commands in the theme's directory :

npm install

Local development

Launch your watch for assets with :

npm run dev

For production sites, create your build with :

npm run build

Remote development (highly discouraged)

For remote developement :

npm run build -- --watch

Vite & WordPress

• All the static assets used in scss or js files (images, fonts, etc.) are copied as-is to the dist directory. The other images used directly in php files are not copied.
• To detect dev mode in php there is no dist directory, it is added on build.

Troubleshooting [dev mode]

• Vite needs to know the root path of your project so you cannot use a subdirectory as the root of your WordPress installation.
• If you haven't started the dev server, your assets will not be compiled just npm run dev and refresh page.
• In your scss files use the alias @ to target the static/ directory. ie : background-image: url('@/img/logo.png');