0

I need to load head.js in my head and application.js at the bottom of my page. The following seems to stop all my scripts being loaded! Is there a syntax error? Im confused as I used the documentation from here:

https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme

global:
  version: 1.x
  css:
    base:
      /ui/style.css: {preprocess: false, minified: false}

  js-header:
    header: true
    js:
      /ui/head.js: {preprocess: false, minified: false, weight: '-100'}

  js-footer:
    js:
      /ui/application.js: {preprocess: false, minified: false, weight: '-99'}

UPDATE - It appears to me that header: true is used to move either all or none of the scripts to the head. Can someone confirm if this is right?

If this is the case, how can I load scripts in both the head and the bottom of the page?

3

You have to add additional libraries: https://ffwagency.com/blog/managing-css-and-javascript-files-drupal-8-libraries

So in my theme.info.yaml

libraries:
  - THEME-NAME/global
  - THEME-NAME/custom

In my theme.libraries.yaml file:

global:
  version: 1.x
  css:
    base:
      /ui/style.css: {preprocess: false, minified: false}
  js:
    /ui/application.js: {preprocess: false, minified: false, weight: '-99'}

custom:
  version: 1.x
  header: true
  js:
    /ui/head.js: {}

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.