How to Set Up a Vite-Powered WordPress Theme with Sass and Hot Reloading

Developers can modernize WordPress theme development by integrating Vite, a fast front-end build tool, to handle Sass compilation, JavaScript modules, and hashed production assets. The setup involves configuring a vite.config.js file with manifest generation enabled, so WordPress can dynamically resolve hashed filenames from the dist folder at runtime. A custom PHP helper function checks whether the Vite dev server is running locally, allowing WordPress to load assets directly from it during development for a faster workflow. For production, Vite compiles and outputs optimized files into a dist directory, which WordPress enqueues using filenames read from Vite's generated manifest.json. The approach is compatible with most classic WordPress themes and requires only Node.js, npm, and the vite and sass packages as dev dependencies.