Attaching External Css and Js in Drupal 8

If you are writing your own module in Drupal, you often need to include external or inline CSS / JS through your module code. In Drupal 7 it was typically done using the below approaches:

CSS

1. Using drupal_add_css():


drupal_add_css(drupal_get_path('module', 'module_name') . '/module_name.css', array('group' => CSS_DEFAULT, 'type' => 'file'));

2. Using #attached:

Attaching External Css and Js in Drupal 8


$form['#attached']['css'] = array(
  drupal_get_path('module', 'module_name') . '/module_name.css',
);

Similar for JS

1. Using drupal_add_js():


drupal_add_js(drupal_get_path('module', 'module_name') . "/js/module_name.js");

2. Using #attached:


$form['#attached']['js'][] = array(
  'type' => 'file',
  'data' => drupal_get_path('module','module_name') . '/js/module_name.js',
);

For more detail about these you can check the api on:

The above things would help you to add the required js and css files to your form or page.

But in Drupal 8, these function are deprecated and we cannot attach our css and js files directly using #attached parameter.

If you try to do so in Drupal 8 it would throw a White Screen of Death giving an error in the php log:


Uncaught PHP Exception LogicException: "You are not allowed to use js/css in #attached" at path_of_commons.inc file line 683

So in order to add css and js in Drupal 8 we need to create libraries, so that we can attach the required js and css files

Steps to add libraries:

1. We create a module_name.libraries.yml file having list of all the jss and css that we wish to use.


name_of_the_key1: // This would basically work as a key for you.
  version: 1.x
  js:
    js/js_file1.js: {}  // Name of your js file
  dependencies:  // Adding dependencies if you have any.
    - core/jquery
    - core/drupalSettings
  css:
    theme:
    css/css_file1.css: {} // Name of your css file.
 
name_of_the_key2: // This would basically work as a key for you.
  version: 1.x
  js:
    js/js_file2.js: {}  // Name of your js file
  css:
    theme:
    css/css_file2.css: {} // Name of your css file.

This would add two libraries in your module.

2. In order to attach the required js and css to your page/form, we simply replace


drupal_add_js()
drupal_add_css()

with key would be the key that you have defined in module_name.libraries.yml file.


$page['#attached']['library'][] = 'name_of_your_module/name_of_the_key2';
// Name of the key would be the key that you have defined in module_name.libraries.yml file.

So this way you can create multiple entries in your libraries.yml file and attach those libraries at specific position.