In Drupal, a library is a collection of files, such as JavaScript or CSS files, that are used to add functionality or styles to a website, and "libraries-override" and "libraries-extend" are two keys that can be used in the theme's .info.yml file to modify and extend the assets (CSS, JavaScript) loaded by Drupal core or other modules or any contributed theme.

  • libraries-override - option allows us to replace an entire library or specific assets within a library with our own version.
  • libraries-extend - option allows us to add additional assets to a library already loaded by Drupal or any contributed theme.

libraries-override:

libraries-override:
  # Remove whole library.
  bootstrap_barrio/global-styling: false
  
  # Remove single assets.
  user/drupal.user:
    css:
      component:
        css/user.module.css: false
        
  # Replace assets.
  system/base:
    css:
      component:
        css/components/align.module.css: src/css/align.css
        
  # Replace whole library.
  views/views.module: mytheme/view_css

libraries-extend:

libraries-extend:
  # Extend library
  system/base:
    - mytheme/align

Hooks:

Modifying library using hook_library_info_alter 

/**
 * Implements hook_library_info_alter().
 */
function mymodule_library_info_alter(array &$libraries, $extension) {
  $google_map_key = \Drupal::config('cfp.gmap.settings')->get('google_map_key');
  if ($extension === 'crowd_funding' && isset($libraries['location'])) {
    $gmapjs = 'https://maps.googleapis.com/maps/api/js?key=' . $google_map_key . '&libraries=places&callback=gMapSearch.init';
    unset($libraries['location']['js']);
    $libraries['location']['js'] = [
      'js/geocomplete.js' => [
        'preprocess' => FALSE,
      ],
      'js/location.js' => [
        'preprocess' => FALSE,
      ],
      $gmapjs => [
        'type' => 'external',
        'minified' => TRUE,
        'attributes' => [
          'defer' => TRUE,
          'async' => TRUE,
        ],
      ],
    ];
  }
}