0

The JavaScript files for my theme aren't loading. What am I missing?

My theme.info.yml:

name: theme
type: theme
description: Custom theme.
core: 8.x
base theme: classy
version: 8.x-1.0
libraries:
  - theme/global-styling
#stylesheets-remove:
#  - '@classy/css/components/tabs.css'
#  - core/assets/vendor/normalize-css/normalize.css
regions:
  logo: 'Logo'
  navigation: 'Navigation'
  slider: 'Slider'
  content: Content  # the content region is required
  contact: 'Contact (Content Top)'
  testimonials: 'Testimonials'
  call-to-action: 'Call To Action'
  footer_logo: 'Footer logo'
  footer_first: 'Footer first'
  footer_second: 'Footer second'
  footer_third: 'Footer third'
  footer_copyright: 'Footer Copyright'
regions_hidden:
  - sidebar_first

My theme.libraries.yml:

global-styling:
  version: 1.x
  css:
    theme:
      css/animate.css: {}
      css/bootstrap.css: {}
      css/et-line-icons.css: {}
      css/font-awesome.min.css: {}
      css/extralayers.css: {}
      css/settings.css: {}
      css/magnific-popup.css: {}
      css/owl.carousel.css: {}
      css/owl.transitions.css: {}
      css/full-slider.css: {}
      css/text-effect.css: {}
      css/menu-hamburger.css: {}
      css/style.css: {}
      css/responsive.css: {}
      css/custom.css: {}
      //vjs.zencdn.net/5.8.8/video-js.css: { type: external }
  js:
    //vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js: { type: external, minified: true }
    js/modernizr.js: {}
    js/bootstrap.js: {}
    js/bootstrap-hover-dropdown.js: {}
    js/jquery.easing.1.3.js: {}
    js/skrollr.min.js: {}
    js/smooth-scroll.js: {}
    js/jquery.appear.js: {}
    js/wow.min.js: {}
    js/page-scroll.js: {}
    js/jquery.easypiechart.js: {}
    js/jquery.parallax-1.1.3.js: {}
    js/jquery.isotope.min.js: {}
    js/owl.carousel.min.js: {}
    js/jquery.magnific-popup.min.js: {}
    js/popup-gallery.js: {}
    js/text-effect.js: {}
    js/jquery.tools.min.js: {}
    js/jquery.revolution.js: {}
    js/counter.js: {}
    js/jquery.countTo.js: {}
    js/jquery.fitvids.js: {}
    js/imagesloaded.pkgd.min.js: {}
    js/classie.js: {}
    js/hamburger-menu.js: {}
    js/main.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings
  • Is the yaml indentation correct? Looks a little off on my phone. – Kevin Feb 8 '17 at 21:50
  • Looks to me like it is! The js is one indent lever higher because of the "theme" indent under css. – Pim Feb 8 '17 at 21:51
  • I thought comments needed # in yml. Can you do // ? – RaisinBranCrunch Feb 8 '17 at 22:01
  • It's an external resource, stackoverflow displays it as a comment. Same result without that line, though. – Pim Feb 8 '17 at 22:02
  • Is it a core theme? A contributed theme? Or a custom theme? – Jaypan Feb 9 '17 at 5:47
-1

Try this : Add this code in .info.yml

libraries:
        - 'theme/global-styling'
        - 'theme/global-scripting'

And include the CSS and JS the libraries.yml file like below.Include styles and scripts seprately.

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

 global-scripting:
    css:
      theme:
         js/script.js: {}
  • 1
    How does this solve the OP question? Have some errors in your examples. – Kevin Feb 10 '17 at 4:43

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.