CODEWITHSUNDEEP
drupaldrupal-8drupal-themingdrupal-themes
Hamza Elatfi
Hamza Elatfi

Reputation: 11

The libraries of my customized theme cannot be loaded - Drupal 8

I’m trying to translate my Drupal 7 theme to a Drupal 8 theme.
I followed the instructions to add my CSS Javascript files by creating the file *.libraries.yml.

This is my babol_dp8.libraries.yml file:

global-scripts:
  version: 1.x
  js:
    assets/js/bootstrap.min.js: {}
    assets/js/fhmm.js: {}
    assets/js/venobox.min.js: {}
    assets/js/sticky-kit.min.js: {}
    assets/js/cs.js: {}
  dependencies:
    - core/jquery
global-styling:
  version: 1.x
  css:
    theme:
      assets/cs2015.css: {}
      assets/documenter_style.css: {}
      assets/mobile_cs2015.css: {}
      assets/style.css: {}
      assets/css/bootstrap-theme.css: {}
      assets/css/bootstrap-theme.min.css: {}
      assets/css/bootstrap.css: {}
      assets/css/bootstrap.min.css: {}
      assets/css/featherlight.gallery.min.css: {}
      assets/css/featherlight.min.css: {}
      assets/css/fhmm.css: {}

This is my babol_dp8.info.yml file:

name: babol_dp8
type: theme
engine: twig
description: 'New Drupal 8 Twig Theme created with the help of Twigify.'
version: VERSION
core: 8.x
libraries:
  - babol_dp8/global-styling
  - babol_dp8/global-scripts
base theme: classy
regions:
  sidebar_first: 'Left sidebar'
  sidebar_second: 'Right sidebar'
  content: 'Content'
  header: 'Header'
  footer: 'Footer'
  highlighted: 'Highlighted'
  help: 'Help'
  content_extra: 'Extra Content Data'

Even though I followed the instructions given, my libraries cannot be loaded.
I have already emptied the cache many times after modifying the files and I don't have any modules with the same name as the theme.

I don’t understand where the problem is. I am looking forward to hearing from you soon. Thank you

Upvotes: 1

Views: 444

Answers (1)

MacSim
MacSim

Reputation: 384

Unless it's a mistake in what you wrote here, your indentation is bad in your babol_dp8.libraries.yml file. There are 2 extra spaces at the start of each line.

global-scripts:
  version: 1.x
  js:
    assets/js/bootstrap.min.js: {}
    assets/js/fhmm.js: {}
    assets/js/venobox.min.js: {}
    assets/js/sticky-kit.min.js: {}
    assets/js/cs.js: {}
  dependencies:
    - core/jquery
global-styling:
  version: 1.x
  css:
    theme:
      assets/cs2015.css: {}
      assets/documenter_style.css: {}
      assets/mobile_cs2015.css: {}
      assets/style.css: {}
      assets/css/bootstrap-theme.css: {}
      assets/css/bootstrap-theme.min.css: {}
      assets/css/bootstrap.css: {}
      assets/css/bootstrap.min.css: {}
      assets/css/featherlight.gallery.min.css: {}
      assets/css/featherlight.min.css: {}
      assets/css/fhmm.css: {}

Upvotes: 0

Related Questions