Is there a simple way to add a core themes css file to your custom theme?

sidgrafix

1/26/24, 9:24 PM

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?

196

1 + 1

theming

cilefen

1/26/24, 9:27 PM

`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`.

Score:2

Drupal

leymannx

1/26/24, 9:49 PM

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

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: Is there a simple way to add a core themes css file to your custom theme?

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.