How to write WordPress Themes with SASS, TypeScript, and HMR
This post was published 1 years ago so it might be outdated.
Not interested in all the details? I shared a twentytwenty child theme with SASS, TypeScript, and HMR applying all the ideas in this post that you can use as a starting point.
Modern front-end developer experience is nicer than the one we had in 2007 when WordPress came out.
- CSS preprocessors help you reduce boilerplate and reuse mixins.
- TypeScript minimizes runtime errors with its type-checking and IDE auto-completion.
- The latest syntactic sugar from ECMAScript drafts makes your code simpler.
- Partial content refresh when files change with HMR enables a seamless experience.
Regular WordPress themes require reloading the entire page when any JavaScript or CSS changes. However, with tools like Vite we can achieve a state-of-the-art developer experience.
In this post I will guide you through all the steps required to add SASS, TypeScript, and HMR support to any WordPress theme.