Adding stylesheets (CSS) and JavaScript (JS) to a Drupal theme

 Define all of your CSS and Javascript file or libraries in a *.libraries.yml file in your theme folder. If your theme is named custom, the file name should be custom.libraries.yml. Each "library" in the file is an entry detailing CSS and JS files (assets), like this.

# custom.libraries.yml

cuddly-slider:

  version: 1.x

  css:

    theme:

      css/cuddly-slider.css: {}

  js:

    js/cuddly-slider.js: {}

In this example, the JavaScript: cuddly-slider.js and CSS cuddly-slider.css are located in the respective js and css directories of your theme.

#Including jQuery in your Library

Remember, Drupal no longer loads jQuery on all pages by default, so for example if cuddly-slider needs jQuery you must declare a dependency on the core library that contains jQuery (Drupal core provides jQuery, not a module or theme). Declare the dependency with an extension name followed by a slash, followed by the library name, in this case core/jquery. If another library required cuddly-slider it would declare:custom/cuddly-slider, the theme name, followed by the library name. You cannot declare an individual file as a dependency, only a library.

So, to make jQuery available for cuddly-slider, we update the above to.

# custom.libraries.yml

cuddly-slider:

  version: 1.x

  css:

    theme:

      css/cuddly-slider.css: {}

  js:

    js/cuddly-slider.js: {}

  dependencies:

    - core/jquery

#Declaring dependencies

To declare a dependency, the required library is declared in the form resource/library. For core libraries, the resource is core, while for others it is the module name or the theme name. So if new_library is dependent on jQuery from core, my_library declared in my_theme, and my_library declared in my_module, you would declare the dependencies as.

# custom.libraries.yml

new_library:

  js:

    js/new_library.js: {}

  dependencies:

    - core/jquery

    - my_module/my_library

    - my_theme/my_library

The module and theme names provide namespacing for libraries of the same name.

#Attaching a library to all pages

Most themes will use a global-styling asset library, for the stylesheets (CSS files) that need to be loaded on every page where the theme is active. It is also possible to do with JS via a global-scripts asset library

# custom.libraries.yml (multiple libraries can be added to a libraries.yml file, these would appear below the cuddly-slider libraries added earlier)

global-styling:

  version: 1.x

  css:

    theme:

      css/layout.css: {}

      css/style.css: {}

      css/colors.css: {}

global-scripts:

  version: 1.x

  js: 

    js/navmenu.js: {}   

To be available everywhere in the theme, the global-styling/global-scripts libraries must then be added to your theme's info.yml (in this case custom.info.yml)

#custom.info.yml

name: Custom

type: theme

description: 'Custom theme'

core: 8.x

# by adding global-styling and global-scripts here, the css/js files in the library become 

# available to every page presented by the theme

libraries:

  - custom/global-styling

  - custom/global-scripts

base theme: classy

regions:

  header: Header

  content: Content

  sidebar_first: 'Sidebar first'

  footer: Footer

#Attaching a library via a Twig template

You can attach an asset library to a Twig template using the attach_library() function in any *.html.twig, file like so:

{{ attach_library('custom/cuddly-slider') }}

<div>Some fluffy markup {{ message }}</div>

#Attaching a library to a subset of pages

function custom_preprocess_page(&$variables) {

  $variables['page']['#cache']['contexts'][] = 'route';

  $route = "entity.node.preview";

  if (\Drupal::routeMatch()->getRouteName() === $route) {

    $variables['#attached']['library'][] = 'custom/node-preview';

  }

}