Book Image

Drupal 10 Development Cookbook - Third Edition

By : Matt Glaman, Kevin Quillen
Book Image

Drupal 10 Development Cookbook - Third Edition

By: Matt Glaman, Kevin Quillen

Overview of this book

This new and improved third edition cookbook is packed with the latest Drupal 10 features such as a new, flexible default frontend theme - Olivero, and improved administrative experience with a new theme - Claro. This comprehensive recipe book provides updated content on the WYSIWYG (What You See Is What You Get) editing experience, improved core code performance, and code cleanup. Drupal 10 Development Cookbook begins by helping you create and manage a Drupal site. Next, you’ll get acquainted with configuring the content structure and editing content. You’ll also get to grips with all new updates of this edition, such as creating custom pages, accessing and working with entities, running and writing tests with Drupal, migrating external data into Drupal, and turning Drupal into an API platform. As you advance, you’ll learn how to customize Drupal’s features with out-of-the-box modules, contribute extensions, and write custom code to extend Drupal. By the end of this book, you’ll be able to create and manage Drupal sites, customize them to your requirements, and build custom code to deliver your projects.
Table of Contents (17 chapters)

Compiling CSS and JavaScript pre- and post-processors with Laravel Mix

Laravel Mix is a project that streamlines configuring Webpack, a bundler for frontend development. Laravel Mix was originally built to be used with Laravel projects but can be used for any project that bundles JavaScript or CSS pre- and post-processing.

In this recipe, we will add Laravel Mix to our theme for transpiling our ES6 JavaScript and PostCSS to post-process our CSS based on the desired browser support.

Getting ready

The Adding CSS and JavaScript to your theme recipe from this chapter covers how to create asset libraries for your theme. This section will use information from that recipe.

How to do it…

  1. First, create a src directory in your theme to store source files for your CSS and JavaScript that will be processed by Webpack:
    mkdir src
  2. Next, create a styles.css file in the src directory with the following:
    :root {
      --text-color: rgb(43, 43, 43);
    }
    body {
      ...