For this project I'm using Adaptive Theme, but basically this approach does not depend on the base theme.
Steps to add your css and/or js files:
- Define a new library in your themes yourthemename.libraries.yml
- Add a reference to your new library in yourthemes yourthemename.info.yml
Let's have a look at an example where we are going to add mystylesheet.css and myscript.js to our theme and load it on every page of this site. Our theme directory is called yourthemename.
- Create the file public_html/themes/yourtheme/styles/css/mystylesheet.css
- Create the file public_html/themes/yourtheme/scripts/myscript.js
- Define a new library called global-styling in public_html/themes/yourtheme/yourtheme.libraries.yml and add the following code:
- Reference the new library global-styling in public_html/themes/yourtheme/yourtheme.info.yml and add the following code. The bold text is the one you're actually adding, the other lines (green) should already exist in your file. The regions depend on the theme you're using. As mentioned above, we're using Adaptive Theme in this case:
name: Some theme name
'base theme': at_core
'subtheme type': adaptive_subtheme
description: 'Wohlfhlwege Theme der Naturfreunde International (base theme: at_core).<br /> Generated: Di 21st, Jun - 13:50'
'alt text': 'Screenshot for Wohlfühlwege'
header_first: 'Header first'
header_second: 'Header second'
After adding those lines clear all caches. If you're working on the commandline just run drush cr.
This is all you need to do. If you added those lines and cleared the caches but your new files are still not being loaded, you might have a problem with the indentation. You definitly don't have to re-save your theme settings (from the design admin pages), all you need to do is clearing caches and reloading your page.