How to make CSS and JS both load in the footer We have a library slick_carousel in our mytheme.info.yml and mytheme.libraries.yml defined in our sub-theme (see below). 

How can we make the CSS and JS both load in the footer? Currently only the JS file is showing in the footer. 

Current mytheme.libraries.yml:

slick_carousel:
  css:
    theme:
      //cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css: { type: external, attributes: { async: true } }
  js:
    //cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js: { type: external, minified: true  }
  dependencies:
    - core/jquery


We have tried, but didn't work. We need to do this without a module. 


Removing dependency on core/jquery.
Change theme to component under css.
You can just add 'scope' option and pass either 'header' or 'footer' as the value.  

slick_carousel:
  css:
    theme:
      slick.min.css: { type: external, attributes: { aysnc: true }, scope:footer }
  js:
    slick.min.js: { type: external, minified: true, scope: footer }
  dependencies:
    - core/jquery