{"id":4423,"date":"2016-08-15T15:43:53","date_gmt":"2016-08-15T20:43:53","guid":{"rendered":"http:\/\/www.carnaghan.com\/?p=4423"},"modified":"2019-09-23T20:31:09","modified_gmt":"2019-09-24T00:31:09","slug":"attaching-js-css-assets-drupal-8","status":"publish","type":"post","link":"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/","title":{"rendered":"Attaching JS and CSS Assets in Drupal 8"},"content":{"rendered":"\n
Drupal<\/span> 8 has introduced a different way of attaching JavaScript<\/span> and CSS to themes and custom modules via a new concept called libraries, which are covered in Day 9<\/a>. Libraries are essentially .yml files<\/span> that define different groups of assets that can later be attached via module code. When I started working with the theme layer in Drupal<\/span> 8, I quickly realized that certain things are very different from Drupal<\/span> 7. One of the main gotchas for anyone new to Drupal<\/span> 8 is the idea that JavaScript libraries<\/span> are now only loaded where they are needed. In contrast to Drupal<\/span> 7 where jQuery<\/span> for example, was loaded on every page, in Drupal<\/span> 8 jQuery is no longer automatically loaded<\/a>. This provides for a better optimized site with only the required libraries included in areas that they are needed.<\/p>\n\n\n\n A library can be easily defined by creating a .yml file<\/span>. The example below illustrates creating a library file<\/span> with two libraries for my main custom modules style and then a second library for the DataTables jQuery plugin<\/a>. In my example I am also using a CDN for DataTables and you will note I added ‘type: external’ to indicate this. If you are packaging minified code you will also want to include ‘minified: true’.<\/p>\n\n\n\n\n\n The nice thing about libraries is that once they are defined, it is very easy to use them anywhere on your site or specific places in your custom module<\/span>. If you have a controller you can simply pass your library into your returning render array like so:<\/p>\n\n\n\n Since our example uses DataTables, we might decide to only include the data<\/span>-tables library on pages that include an HTML<\/span> table. This can be done using hook_element_info_alter directly in our .module file<\/span>, which allows us to selectively apply our data<\/span>-tables library!<\/p>\n\n\n\n If you want to include libraries in every page of your custom theme, this can also be accomplished by simply adding a theme.libraries.yml file<\/span> in the root path of your theme. Anything defined in this file<\/span> will be called on every page of your site that uses the theme. You can also attach specific libraries in twig using the syntax<\/span><\/p>\n\n\n\n There is more information on libraries and theming in the Drupal.org articles Adding CSS and JS to a Drupal 8 Theme<\/a>, Adding CSS and JS to a Drupal Module<\/a>, and Best Practices for Handling External Libraries in Drupal 8<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Drupal 8 has introduced a different way of attaching JavaScript and CSS to themes and custom modules via a new concept called libraries, which are covered in Day 9. Libraries are essentially .yml files that define different groups of assets that can later be attached via module code. When I started working with the theme layer in […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,7129],"tags":[405],"post_series":[406],"yoast_head":"\nCreating and Using a Library (day8.libraries.yml) File<\/span> in Your Custom Module<\/h2>\n\n\n\n
module-styles:\nversion: 8.0.0\ncss:\nbase:\ncss\/my-module.css: {}\n\ndata-tables:\ncss:\ntheme:\nhttps:\/\/cdn.datatables.net\/t\/bs\/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.11,b-1.1.2,b-colvis-1.1.2,b-flash-1.1.2,b-html5-1.1.2,b-print-1.1.2,cr-1.3.1,fc-3.2.1,fh-3.1.1,kt-2.1.1,r-2.0.2,rr-1.1.1,sc-1.4.1,se-1.1.2\/datatables.min.css: { type: external, minified: true }\njs:\nhttps:\/\/cdn.datatables.net\/t\/bs\/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.11,b-1.1.2,b-colvis-1.1.2,b-flash-1.1.2,b-html5-1.1.2,b-print-1.1.2,cr-1.3.1,fc-3.2.1,fh-3.1.1,kt-2.1.1,r-2.0.2,rr-1.1.1,sc-1.4.1,se-1.1.2\/datatables.min.js: { type: external, minified: true }\njs\/datatables-config.js: {}<\/code><\/pre>\n\n\n\n
'#attached' [\n 'library' [\n 'day9\/module-styles', \/\/include our custom module library for this response\n 'day9\/data-tables', \/\/include data tables libraries with this response\n ]\n]<\/code><\/pre>\n\n\n\n
Selectively Applying a Library to Tables<\/h2>\n\n\n\n
\/**\n* Implements hook_element_info_alter().\n*\/\nfunction my_assets_element_info_alter(array &$types) {\n if (isset($types['table'])) {\n $types['table']['#attached']['library'][] = 'day9\/data-tables';\n }\n}<\/code><\/pre>\n\n\n\n
Using Libraries in our Theme<\/h2>\n\n\n\n
{{ attach_library('fluffiness\/cuddly-slider') }}<\/code><\/pre>\n\n\n\n