-2

I don't understand why my CSS or JS files doesn't loaded by drupal. My folder structure is:

StarterTheme (starterpf_d8_2019 named folder)
     |__ CSS folder
             |__ application.css
     |__ 3rdparty folder
             |__ baguettebox
                      |__baguetteBox.min.css
     |__ JS Folder
             |__jquery_plugin
                   |__ baguettebox
                         |__baguetteBox.min.js

In my starterpf_d8_2019.libraries.yml:

global-styling:
    version: VERSION
    css:
        theme:
        css/application.css: {}
    3rdparty: 
        theme:
            #Style pour BaguetteBox
            3rdparty/baguettebox/baguetteBox.min.css: {}

global-scripts:
    version: VERSION
    3rdparty:
      theme:
          3rdparty/bxslider/js/jquery.bxslider.js: {}
          3rdparty/lightslider/js/lightslider.js: {}
    js: 
      js/navmenu.js: {}   
      js/modernizr.js: {}
      theme:
       js/jquery_plugin/baguettebox/baguetteBox.min.js: {}
    dependencies:
       - core/jquery

And in my starterpf_d8_2019.info.yml file:

name: Starter PF D8 2019
libraries:
  #Les librairies de style
  - starterpf_d8_2019/global-styling
  #Les librairies de javascript
  - starterpf_d8_2019/global-scripts

But nothing appear in the firebug window, even if I flush cache with drush (cr) and disable cache in admin/config/development/performance Yml indent seem to be good according Netbeans color. I don't know where does it come from !?

Thanks for help

EDIT: thanks to @NoSssweat The syntax logical provided by examples get me in mistake.So I fix the issue with cleaning the code. Result is available via the github link provided in comments. Happy.

  • Where does starterpf_d8_2019 come from? You can't pick random names for these things you have to use the proper theme name. Which from your other comments is StarterTheme – Clive Dec 20 '18 at 14:56
  • it's based on basic starter theme (clone) – webmaster pf Dec 20 '18 at 14:57
  • If my previous comment doesn't make you smack your own head, roll your eyes and immediately fix the silly mistake you've made, then you haven't read enough of the documentation yet to be at the point of development you're at. I'd strongly recommend heading back to the documentation – Clive Dec 20 '18 at 15:00
  • Based on the doc, the theme work and I don't see any name error, all match with the theme name folder (starterpf_d8_2019). StarterTheme was for the example, but I put real name after your comment. – webmaster pf Dec 20 '18 at 15:08
  • 2
    That 3rdparty: key looks suspect, remove it and see what happens. – No Sssweat Dec 20 '18 at 17:54
2

You are using the wrong indentations.
The global-styling css for example should be the root for the theme, 3rdparty and js sublibraries. Here is an example:

global-styling:
  version: VERSION
  css:
    theme:
      css/application.css: {}
    3rdparty:
      3rdparty/flexslider/flexslider.css: {}
      3rdparty/bxslider/css/jquery.bxslider.css: {}
      3rdparty/baguettebox/baguetteBox.min.css: {}
      3rdparty/chocolat/chocolat.css: {}
      3rdparty/lightslider/css/lightslider.css: {}
    js:
      js/jquery_plugin/responsiveslides/responsiveslides.css: {}

global-scripts:
  version: VERSION
  js:
    3rdparty/bxslider/js/jquery.bxslider.js: {}
    3rdparty/lightslider/js/lightslider.js: {}
    js/navmenu.js: {}
    js/modernizr.js: {}
    js/jquery_plugin/jquery.flexslider.js: {}
    js/jquery_plugin/jquery.floatit.js: {}
    js/jquery_plugin/stickUp.js: {}
    js/jquery_plugin/jquery.masonry.min.js: {}
    js/jquery_plugin/baguettebox/baguetteBox.min.js: {}
    js/jquery_plugin/chocolat/jquery.chocolat.min.js: {}
    js/jquery_plugin/responsiveslides/responsiveslides.min.js: {}
    js/jquery_plugin/lazyload/jquery.lazyloadxt.extra.min.js: {}
    js/jquery_plugin/stacktable.min.js: {}
    js/build/scripts.js: {}
  dependencies:
    - core/drupal
    - core/jquery

UPDATE I fixed the global-scripts definition. It seems that it doesn't support grouping as the global styling! I didn't know that :)

  • it works for css but not for js scripts, I think I need to invert 3rdparty and theme in js section,not ? – webmaster pf Dec 21 '18 at 9:53
  • ok for CSS, not for JS :( – webmaster pf Dec 21 '18 at 10:01
  • Yes, I updated the answer. It seems that global scripts doesn't support grouping like global styling – Ismail Cherri Dec 21 '18 at 10:06
  • I think so.There are differences between them. – webmaster pf Dec 21 '18 at 10:31

Not the answer you're looking for? Browse other questions tagged or ask your own question.