When a Drupal site grows organically, with multiple contributors, the front-end configuration can get out of hand. What starts as a single theme and module, over time can evolve into a Frankenstein mashup of modules and themes and JavaScript (JS) and Cascading Style Sheets (CSS) that no one understands. As a result, the deployment script has to work double time to put everything together. Ugh.
Because the front-end workflow is outside of Drupal’s scope, it needs to be managed separately. It makes no difference to Drupal if you use vanilla JS and CSS, or you build in TypeScript and Sass. All it requires is that you provide it with the JS and CSS that the module or theme needs to function in the browser. Without it, the site can’t execute enhanced user experiences such as animation and complex interactions.
What everyone needs is a plan to assure the front-end build configuration setup is as clean as possible. With that in mind, we’ve come up with a process for a consistent setup for JS and CSS across modules and themes. Luckily, there are some simple tools that can help.