Drupal・2 min read・Last update on November 8, 2019

# Attaching External Css and Js in Drupal 8

 

 

 

 ![Attaching External Css and Js in Drupal 8](/sites/default/files/remediation-media/64e5ddecd8b51449bff05add_blog-featured-image.webp) 

 



 

   Table of contents   
  

 

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:

1. [http://api.drupal.org/api/drupal/developer!topics!forms\_api\_reference.html/7#attached](http://api.drupal.org/api/drupal/developer!topics!forms_api_reference.html/7#attached)
2. [http://api.drupal.org/api/drupal/includes%21common.inc/function/drupal\_process\_attached/7](http://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_process_attached/7)

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](http://drupal.org/node/1839338#comment-7588043) 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.

 



Written by

Nitesh Sethia

 

 

 

 

 

 

 ## We'd love to talk about your business objectives

 [ Contact Us  ](/contact)