THEME.libraries.yml having no effect

Question

My THEME.info.yml file reads:

name: 'name'
type: theme
description: 'description'
core: 8.x
base theme: stark
screenshot: images/image.png
libraries:
  - THEME/navbar

and my THEME.libraries.yml reads:

navbar:
  css:
    theme:
      css/navbar.css: {}
  js:
    js/scrolling.js: {}
  dependencies:
    - core/jquery

From all the guides I've found online, this should mean that navbar.css and scrolling.js get included on all pages that use the theme. But that isn't happening. What have I done wrong here, or what steps do I need to take to figure out why it isn't working?

---

In case it's relevant, the file structure is:

drupal_root
    themes
        custom
            THEME
                css
                    navbar.css
                js
                    scrolling.js
                images
                    image.png
                THEME.info.yml
                THEME.libraries.yml
                THEME.theme

---

The jQuery code in scrolling.js is just:

$(window).on("scroll", function() {
  if ($(this).scrollTop() > 50) {
    document.getElementById("logo").style.width = '150px';
    document.getElementById("logo").style.marginTop = '0px';
  } else {
    document.getElementById("logo").style.width = '300px';
    document.getElementById("logo").style.marginTop = '20px';
  }
});

---

When I manually add

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="{{ theme_path }}/js/scrolling.js"></script>
<link rel="stylesheet" href="{{ theme_path }}/css/navbar.css">

to the top of html.html.twig everything works fine. But as I understand it, this is not considered the proper way of going about things, so if possible I'd prefer to do it using libraries.

---

The extremely helpful comment added by (I think) Ivan Jaros which was unfortunately and rather rudely removed helped me to find that I needed to add <head-placeholder token="{{ placeholder_token|raw }}">, <css-placeholder token="{{ placeholder_token|raw }}"> and <js-placeholder token="{{ placeholder_token|raw }}"> to my html.html.twig file. This helped somewhat: it's now including the CSS file. However:

1. It didn't manage to include the js file, for whatever reason.

2. The head-placeholder token is mostly useful, but seems to be overriding the favicon that I had already specified. Is there a way to keep the other stuff it gives without the link rel="shortcut icon" that it's including from core?

Answer 1

In D8 believe you need to wrap your code around this tags in order for Drupal to recognize it.

(function ($, Drupal, window) {

 // code goes here

})(jQuery, Drupal, window);

So try

(function ($, Drupal, window) {
   $(window).on("scroll", function() {
     if ($(this).scrollTop() > 50) {
       document.getElementById("logo").style.width = '150px';
       document.getElementById("logo").style.marginTop = '0px';
     } else {
       document.getElementById("logo").style.width = '300px';
       document.getElementById("logo").style.marginTop = '20px';
     }
   });
})(jQuery, Drupal, window);

Answer 2

To get the CSS to appear, I needed to put <css-placeholder token="{{ placeholder_token|raw }}"> into the html.html.twig file's header. For JavaScript, <js-placeholder token="{{ placeholder_token|raw }}"> seems to add some useless cruft, and the actual JavaScript created added to the library (including the jQuery dependency) is inserted in through <js-bottom-placeholder token="{{ placeholder_token|raw }}">, which goes at the bottom of the body of the page.

<head-placeholder token="{{ placeholder_token|raw }}"> adds some useful metadata, but was overriding my custom favicons. Moving it up to the top above where I had defined the favicons seems to have fixed this.

To get the JavaScript to work in all browsers, it needed to be wrapped in (function ($) { and })(jQuery);, so my full JS code ended up as:

(function ($) {
  $(window).on("scroll", function() {
    if ($(this).scrollTop() > 50) {
      document.getElementById("logo").style.width = '150px';
      document.getElementById("logo").style.marginTop = '0px';
    } else {
      document.getElementById("logo").style.width = '300px';
      document.getElementById("logo").style.marginTop = '20px';
    }
  });
})(jQuery);

Without wrapping it, it didn't work in anything but Chrome, but with the wrapping as suggested by @No Sssweat, it worked in everything but Chrome.

Answer 3

If you want to add your custom css or any custom js for global then you should add this into global libraries.For better understanding please follow the theme instructions. Theme Instructions Drupal 8

global-css: css: theme: css/style.css: {}

After Changing in libraires then i have put into hook_preprocess_page in my themename.theme file as given below:

function MYTHEMENAME_preprocess_page(&$variables) {
 if ($variables['is_front']) {
 $variables['#attached']['library'][] = 'mycustompopup/fancybox/lib/jquery.mousewheel-3.0.6.pack.js';
 $variables['#attached']['library'][] = 'mycustompopup/fancybox/source/jquery.fancybox.css';
 $variables['#attached']['library'][] = 'mycustompopup/fancybox/source/jquery.fancybox.pack.js';
}
}