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?

  • 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. – kiamlaluno May 31 '15 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.. – Nitesh Sethia May 31 '15 at 17:50
  • You're not alone: drupal.org/node/2391025 – Clive May 31 '15 at 18:31
  • 1
    @Clive inline JS is something else, I don't think that's the question. The question mentiones "files" :) – Berdir May 31 '15 at 19:43
5

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.

| improve this answer | |
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.

| improve this answer | |
  • Probably worth mentioning drupal.org/list-changes as an important resource? – AjitS May 31 '15 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 May 31 '15 at 21:22

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.