From my child theme, how can I remove a library loaded by the parent theme?

Question

I have hit an issue which I think is quite unusual or peculiar when settingup a child theme.

A commercial parent theme I have bought loads the Slick library like this in its theme.libraries.yml:

slick:
  version: VERSION
  css:
    component:
      css/vendor/slick.css: {}
      css/vendor/slick-theme.css: {}
  js:
    js/vendor/slick.min.js: {}

But I don't want the Slick library to be loaded by the parent theme because I will be installing the Slick module, and will be using Slick Views. I found the Slick library loaded by my parent theme was (of course it was) conflicting with the same library loaded by the Slick module.

My idea is somehow in my child theme's childtheme.libraries.yml file override and tell Drupal to ignore the instruction by the parent theme to load the Slick library. If that is not possile, then may I do that in my childtheme.theme file?

The only workaround I could find so far was to hack the parent theme and comment out the lines where Slick library is loaded, but I know this is a bad practice in case I need to update the parent theme in the future for some reason.

What is the best approach for this problem? Thank you.

Answer 1

You can add overrides to your child theme's info.yml file, telling Drupal not to load the slick library from the parent theme.

Refer to the "Libraries-override" section of this well documented blog post explaining and demonstrating the many options available in terms of removing/replacing files called by other modules and themes with specific ones in your theme.

For your use case, you probably just want to remove (aka disable) both css and js files for slick.js from the parent theme. So your "library override" will resemble either:

Case 1: slick is part of a library in the parent theme that includes multiple css and js files for the theme, not just slick

libraries-override:
  parent_theme/parent_theme_library_that_includes_slick:
    css:
      theme:
        path_to_parent_theme_or_vendor_slick_library_folder/slick.css: false
        path_to_parent_theme_or_vendor_slick_library_folder/slick-theme.css: false
    js:
        path_to_parent_theme_or_vendor_slick_library_folder/slick.min.js: false

Case 2: slick is part of a standalone library in the parent theme

libraries-override:
  parent_theme/slick_library_name: false

You won't need to declare a replacement in your libraries-override, since you're using the Slick module itself, and it will load relevant files needed.