THEME.libraries.yml having no effect 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() &gt; 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 

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


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 &lt;head-placeholder token="{{ placeholder_token|raw }}"&gt;, &lt;css-placeholder token="{{ placeholder_token|raw }}"&gt; and &lt;js-placeholder token="{{ placeholder_token|raw }}"&gt; to my html.html.twig file. This helped somewhat: it's now including the CSS file. However:


It didn't manage to include the js file, for whatever reason.
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?
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() &gt; 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);