0

I was trying to create a theme for Drupal 8.1.8. My CSS and JS files unfortunately cannot be loaded. I have checked if I used any tab characters, but I have used always 2 space characters for an indent.

I have read the documentation page at Drupal.org: https://www.drupal.org/theme-guide/8/assets. I was trying around 2 hours with all possible combination. Also I tried the google search, Drupal core code inspection.. I could not figure it out.

My theme is located at themes/englishtrainer. The css is located in themes/englishtrainer/css and the javascript files are in themes/englishtrainer/js. The theme can be enabled as a theme without problems.

The contents of my theme's files in the following.

englishtrainer.info.yml:

name: Englishtrainer
type: theme
version: 8.x-1.0
core: 8.x
package: Custom
# Scripts & Styles
libraries:
  - englishtrainer/global-styling

englishtrainer.libraries.yml:

global-styling:
  version: 1.x
  css:
    theme:
      css/css-test.css: {}
  js:
    js/js-test.js: {}

css/css-test.css:

body {
    background-color: red;
}

js/js-test.js:

alert('it is loaded!');

I was checking the html markup for any occurrences. The javascript console has been also checked. It does not contain any entries.

Do you have any idea?

1

englishtrainer.info.yml:

name: Englishtrainer
type: theme
core: 8.x
version: '1.0.0'
libraries:
  - englishtrainer/base
regions:
  header: Header

No need for package

englishtrainer.libraries.yml:

base:
  version: VERSION
  css:
    theme:
      css/css-test.css: {}
  js:
    js/js-test.js: {}

Use base to start things off and the VERSION keyword will take the version info from englishtrainer.info.yml.

  • And don't forget to KCCC (Keep Calm Clear Cache) after you make changes to these files. – LittleCoding Aug 8 '16 at 19:43
  • Thanks LittleCoding for your quick answer. Unfortunately it does not solve the issue. I was using exactly the same code you have provided, enabling, re-enabling the theme, clearing the cache via Drush and Drupal itself. There was no change. I have added "content: Content" to the regions, because otherwise Drupal was not allowing me to enable the theme. Do you have any further ideas? – jepster Aug 8 '16 at 22:13
  • 1
    As you can see here drupal.org/developing/api/8/assets base is a key name. So using base as the library name, could cause some conflict (have not tested), change base to something else on both files and try again, maybe that's the prob. – No Sssweat Aug 8 '16 at 23:43
  • Did u try configuration->development->performance->bandwidth optimization-> and uncheck aggregate css and js files and save configuration then clear cache @jepster – make-me-alive Aug 9 '16 at 4:56
  • Try to add dependencies: - core/jquery - core/drupalSettings – Leopathu Aug 9 '16 at 6:17
0

Solved it. My issue was, that I had a theme "and" a module with the same name. However the module did not implement any theming components. But this broke the theme. After I have uninstalled the module with the same name, the background was red (css worked) and the javascript alert appeared (javascript worked).

Thank you for your attention.

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.