3

I created a custom Drupal 8 module. I am now trying to add JavaScript and CSS files using the my_module.libraries.yml file and the following code, which doesn't work.

lrv_key:
  version: 1.x
  js:
    js/lrv.js: {}   
    dependencies:
      - core/jquery
      - core/drupalSettings
  css:
    theme:
      css/lrv.css: {}

How can I correctly add CSS and JavaScript files to pages from a module?

2 Answers 2

7

A .libraries.yml file used from a module doesn't tell Drupal to attach the JavaScript and CSS files defined from the library to every page. To attach the library when some conditions are met, a module should implement hook_page_attachments().

function mymodule_page_attachments(array &$attachments) {
  if (\Drupal::currentUser()->isAuthenticated()) {
    $attachments['#attached']['library'][] = 'my_module/lrv';
  }
}

Using that code, the library would be attached to every page visited from a logged-in user. Attaching the library to every page, even when they are requested from anonymous users just require implementing a hook similar to the following one.

function mymodule_page_attachments(array &$attachments) {
  // Unconditionally attach the mymodule/lrv library.
  $attachments['#attached']['library'][] = 'my_module/lrv';
}

The library definition shown in the question contains an error: The dependencies key should not be a sub-key of the js nor the css key, but it should be at the same level of the js and css keys. See how Drupal core defines its libraries, for example the ones defined in core.libraries.yml. (I removed the comment lines from the definitions I copied.)

jquery:
  remote: https://github.com/jquery/jquery
  version: "3.2.1"
  license:
    name: MIT
    url: https://github.com/jquery/jquery/blob/3.2.1/LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/jquery/jquery.min.js: { minified: true, weight: -20 }

jquery.cookie:
  remote: https://github.com/carhartl/jquery-cookie
  version: "v1.4.1"
  license:
    name: MIT
    url: https://github.com/carhartl/jquery-cookie/blob/v1.4.1/MIT-LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/jquery.cookie/jquery.cookie.min.js: { minified: true }
  dependencies:
    - core/jquery

jquery.farbtastic:
  remote: https://github.com/mattfarina/farbtastic
  version: "1.2"
  license:
    name: GNU-GPL-2.0-or-later
    url: https://github.com/mattfarina/farbtastic/blob/master/LICENSE.txt
    gpl-compatible: true
  js:
    assets/vendor/farbtastic/farbtastic.js: { minified: true }
  css:
    component:
      assets/vendor/farbtastic/farbtastic.css: {}
  dependencies:
    - core/jquery

Putting the dependencies key in the wrong place would not allow Drupal to load the libraries from which your library depends. Your library would work only when Drupal already loaded the core/jquery and the core/drupalSettings libraries for other libraries.
This and not implementing hook_page_attachments() are two possible reasons for your library not to work; another reason could be errors in the JavaScript code or in the CSS code (for example a wrong CSS selector).

The hook_page_attachments() implementations I shown use the following library definition.

lrv:
  version: 1.x
  js:
    js/lrv.js: {}   
  css:
    theme:
      css/lrv.css: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

The name of the library is my_module/lrv because it is defined as key lrv (the one I used in the code I shown) in the file my_module.libraries.yml (the one you seem to use).

See Defining a library and Attaching a library to page(s).

Note about theme libraries

What I described in this answer is valid only for modules: Themes just need to use a .libraries.yml file. Drupal will attach the libraries defined in the active theme to every page.
That is done in system_page_attachments(), which uses the following code. (See the comment before the quoted code.)

// Attach libraries used by this theme.
$active_theme = \Drupal::theme()->getActiveTheme();
foreach ($active_theme->getLibraries() as $library) {
  $page['#attached']['library'][] = $library;
}
4
  • can you attach using a hook_field_preprocess? or how would you attach only when a field level?
    – awm
    Dec 20, 2018 at 16:46
  • yup it did work $variables['#attached']['library'][] = 'module/lib';
    – awm
    Dec 20, 2018 at 16:51
  • Note that in themes you don't need to use hook_page_attachments to load the library! (which is weird) Dec 18, 2021 at 11:48
  • 1
    @AchrafJEDAY Yes, that is correct, but only because the System module attaches the theme libraries in system_page_attachments().
    – apaderno
    Dec 18, 2021 at 12:42
2

This is because you've got this formatted incorrectly. Your dependencies are on the library itself, not for the js or css components individually. Assuming you have a js file at YOUR_MODULE/js/lrv.js and a css file at YOUR_MODULE/css/lrv.css you should update your declaration like so:

lrv_key:
  version: 1.x
  js:
    js/lrv.js: {}   
  css:
    theme:
      css/lrv.css: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

You can read more in the Defining a library section of the drupal docs.

One note I'll make is that you may want to define your css under component rather than theme, but I'm not sure exactly what you're doing. You can read more about component vs theme in the defining a library section referenced above.

0

Your Answer

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