2

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.

3

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.

  • Hum, thank you. I can see Case 2 suits my needs. The odd thing is that I have done exactly as you told, and also checked this article (ffwagency.com/digital-strategies-blog/…). The odd thing is that my theme cannot remove that library. Drupal continues to load it. I have purged cache with no success. I have double, triple checked for typos. Nothing is wrong, still my child theme cannot remove the library added by the parent theme. – Marcos Buarque Mar 11 '18 at 12:53
  • Hey, I just found the issue, I had used a hyphen before the line generically indicated as 'parent_theme/slick_library_name: false'. There is no hyphen there (as your example clearly indicates), but I was fooled by the other pattern, when you set a library and have to use something like '- parent_theme/slick_library_name' – Marcos Buarque Mar 11 '18 at 17:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.