How to add javascript library in Drupal 8 theme?

Question

I'm attempting to include a custom javascript file to manipulate my menu's in the Drupal 8 theme I am building. I followed the instructions in the Drupal 8 themeing guide, including it in my .info.yml file:

#js libraries
libraries:
- dcf/base

and defining it in my .libraries.yml file:

base:
version: 1.x
js:
    js/endscripts.js
dependencies:
    - core/drupal
    - core/underscore
    - core/backbone
    - core/jquery

and finally creating a .theme file with a hook implementation (I'm not really a PHP developer, so I mostly did a copy/paste job from the example in the guide)

<?php

function dcf_page_alter(&$page) { 
  $page['#attached']['library'][] = 'dcf/base';
}

?>

I clear the cache, log off to see the non-logged-in page (the admin view has a LOT of extra scripts and css files that it calls) and look at the source to see if my script is being loaded. All of the dependencies I listed in my library are being loaded, but not my script itself.

enter image description here

The script itself is just a basic test that should hide my main menu using JQuery, put into the 'strict' format the themeing guide mentions is required.

(function () {
  "use strict";
  // Custom javascript
  $(document).ready(function() {
    $("#block-dcf-main-menu").hide();
  });
})();

I'm at a loss at this point. My instinct is that the mistake is in my hook implementation, because I really don't understand Drupal's hook system, but as far as I can tell, it could still just be that they haven't finished implementing this yet for Drupal 8(I'm doing this to test Drupal 8 for my organizations upcoming website rebuild, and am currently running Drupal 8.0.x-beta2 with no additional modules installed)

Long shot but try changing js/endscripts.js to js/endscripts.js: {} and clearing cache. You also shouldn't need to reference the library in both the THEME.info.yml file and attach it in an alter hook, one will be sufficient — Clive
That did it. Don't know why, but now the script is showing up. If you want to add an answer to that effect I'll come back and accept it. — whiplashomega
@whiplashomega I'm trying to do the same thing in Drupal 8 for a widget in a custom module. Can u help me? Point me out to any resources or to the project you developed? Thanks — Sach

Matoeil Matoeil · Accepted Answer · 2016-10-27T09:45:48

this is how i did it

my_theme.info

no library declaration

my_theme.libraries.yml

my_theme:
  version: 1.0
  css:
    theme:
      css/my_theme.css: {}
  js:
    js/my_theme.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings

my_theme.theme

/*
*
*    see doc to attach library more specifically
*
* */
function my_theme_page_attachments_alter(array &$attachments) {
    $attachments['#attached']['library'][] = 'my_theme/my_theme';    
}

/js/my_theme.js

 console.log('it works!');

/css/my_theme.css

 /*smthg radical happens*/
 body{
   display:none;
 }

How to add javascript library in Drupal 8 theme?

2 Answers