3

Is there a way to declare a css dependency in a custom themes libraries.yml similar to adding core js dependencies?

If I can avoid it, I'd rather not just copy a core themes css into my custom theme in Drupal 9 (more specifically latest Drupal 9.5.2)

I tried under dependencies to add a css file from a core theme but it doesn't do anything. So I'm guessing that isn't the way to do it or I wrote it incorrectly.

What I tried was:

global-components:
  version: 1.x
  css:
    theme:
      css/theme-global.css: {}
      css/custom.css: {}
  js:
    js/theme-global.js {}
    js/custom.js: {}
  dependencies:
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once
    - core/themes/claro/css/components/pager.css

Note the last line: attempting to include claro themes pager.css!

Now this didn't break anything, but it also didn't include pager.css in my theme (so obviously this is not the way)

I've spent about an hour searching anyway I could think of without finding an answer - I'm assuming dependencies don't/won't work like this.

Is there a css equivalent to dependencies?

I did also try adding the same path under css: -> theme: followed by : {} which just produced a 404 error because it looked in my theme for directory core/themes/claro/css/components "which obviously doesn't exist."

It's the only css I want from that theme so it would be overkill to add claro as a base theme to my custom theme.

For now I've copied the file into my themes css directory to be able to use it. However I feel there has to be a better more Drupal like way - is there?

1
  • core/themes/claro/css/components/pager.css doesn't work because that is a file not a library. The library containing it is core/claro.
    – cilefen
    Jan 26, 2023 at 21:27

1 Answer 1

2

I think you should be able to reference this file directly starting with a slash like that:

global-components:
  version: 1.x
  css:
    theme:
      css/theme-global.css: {}
      css/custom.css: {}
      /core/themes/claro/css/components/pager.css: {}
  js:
    js/theme-global.js {}
    js/custom.js: {}
  dependencies:
    - core/jquery
    - core/drupal.ajax
    - core/drupal
    - core/drupalSettings
    - core/jquery.once

Flush cache.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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