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?

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
5
  • And don't forget to KCCC (Keep Calm Clear Cache) after you make changes to these files.
    – LittleCoding
    Commented Aug 8, 2016 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
    Commented Aug 8, 2016 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
    Commented Aug 8, 2016 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
    Commented Aug 9, 2016 at 4:56
  • Try to add dependencies: - core/jquery - core/drupalSettings
    – Leopathu
    Commented Aug 9, 2016 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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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