How to add custom stylesheets and scripts to Drupal 8 sites

Testcode

I've been trying the entire afternoon to add my custom  stylesheets and javascripts to a new Drupal 8 site without any luck. There are several howto's floating around the web, explaining how to add custom css and js files to a Drupal 8 but none of them seemed to work in my case. Obviously I've been missing only a little detail. So let me share with you, how to add your own stylesheets and javascripts that are loaded on every page of your Drupal 8 site.

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:

• Create the new stylesheets and Javascripts in a subfolder of your theme
• 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: