Core jQuery not working in Bootstrap theme

Question

I am using Bootstrap 3 subtheme and Drupal 8. For some reason when I add the dependency core/jquery it does not work. What am I doing wrong?

mysubtheme:
  css:
    theme:
      css/slippry.css: {}
    header: true
    js:
      js/slippry.js: {}
  dependencies:
      - core/jquery

The only way I can get jquery to load is when I put the jquery.min.js URL into my page.html.twig file.

Answer 1

Yaml is heavily indentation oriented.

There are yaml validators like: YAMLlint. It will also the intendation for you. But not the wrongly set header option.

You have two indents (spaces) to much before the dash, plus js: needs to be upped too. Also the header property is set wrong, check the docs - if you want the js in the header, it needs its own library definition:

mysubtheme:
  css:
    theme:
      css/slippry.css: {}
  js:
    js/slippry.js: {}
  dependencies:
    - core/jquery

This will work ! (but is in the footer)

This is how the two library definitions will look like:

slippry-css:
  css:
    theme:
      css/slippry.css: {}

and

slippry-js:
  header: true
  js:
    js/slippry.js: {}
  dependencies:
    - core/jquery

You'll need then to add both libraries!

Maybe this will work too:

mysubtheme:
  header: true
  css:
    theme:
      css/slippry.css: {}
  js:
    js/slippry.js: {}
  dependencies:
    - core/jquery

To debug your libraries, use libraries_ui