3

How do I use drupal_add_library(), drupal_add_css() and drupal_add_js() in Drupal 8?

I am porting a module that uses those functions. I am following what reported in this post, which says these functions have been removed in favor of #attached, but I am not able to attach these files to my configuration page.

The error I am getting is the following:

Uncaught PHP Exception LogicException: "You are not allowed to use js in #attached"

How do I attach CSS and JavaScript to a page?

4
  • You simply don't use those functions, since they don't exist in Drupal 8, nor do you use the renamed functions. What exactly you don't understand? #attached was already used from Drupal 7.
    – apaderno
    Commented May 31, 2015 at 17:45
  • @kiamlaluno: Using D8 version of the functions is throwing me an Error which says "Uncaught PHP Exception LogicException: "You are not allowed to use js in #attached"" So I am confused how to use #attached for including js and css.. Commented May 31, 2015 at 17:50
  • You're not alone: drupal.org/node/2391025
    – Clive
    Commented May 31, 2015 at 18:31
  • 1
    @Clive inline JS is something else, I don't think that's the question. The question mentiones "files" :)
    – Berdir
    Commented May 31, 2015 at 19:43

2 Answers 2

6

Drupal_add_js() and Drupal_add_css() are quite simple to write in Drupal 8.

We basically create a module_name.libraries.ymlfile having list of all the jss and css that we wish to use.

An example of which is

name_of_the_key: // This would basically work as a key for you.
  version: 1.x
  js:
    js/name_of_your_js_file.js: {}  // Name of your js file
  dependencies:  // Adding dependencies if you have any.
    - core/jquery
    - core/drupalSettings
  css:
    theme:
    css/name_of_the_css_file.css: {} // Name of your css file.

This would basically add all the files but would not attach these files to your page/form.

So in order to attach the js and css to your page/form, you simply replace

drupal_add_js()
drupal_add_css()

with

$form['#attached']['library'][] = 'name_of your_module/name_of_the_key'; // Name of the key would be the key that you have defined in module_name.libraries.yml file.

So if your module uses different js and css file at different points in a forms/pages you could define n number of keys in your libraries.yml file and use it accordingly.

Source: https://www.drupal.org/node/2274843 and guidance form AjitS.

4

You can no longer add standalone CSS or JS files, you need to make everything a library.

Unless you have something that's dynamic, it's a bit of work to define it, but easy enough.

That change notice is outdated, common problem. It however does have a bold note that links to change records for adding javscript settings (not the same as inline JS as it is static and only conditions definitions/configuration).

There are also some pretty extensive docs available here: Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 module.

If you're building javascript dynamically and need to add that, then that's a bit more complicated. You can for example add it as a standalone head element yourself, but then you won't get things like weights/dependencies. That's also documented on the link above, but the recommended approach for that is to write a JS file and then trigger different behavior through javascript settings.

2
  • Probably worth mentioning drupal.org/list-changes as an important resource?
    – AjitS
    Commented May 31, 2015 at 20:22
  • 2
    @AjitS The question already links to a change record, so I assume that resource is known. But yes, that is an important/useful resource. And unlike many other things, it's actually more useful to search there directly instead of google as you get most recent matches first and not old stuff.
    – Berdir
    Commented May 31, 2015 at 21:22

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.