{"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

Creating and Using a Library (day8.libraries.yml) File<\/span> in Your Custom Module<\/h2>\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

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

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

'#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

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

\/**\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

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

{{ attach_library('fluffiness\/cuddly-slider') }}<\/code><\/pre>\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":"\nAttaching JS and CSS Assets in Drupal 8 - Ian Carnaghan<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Attaching JS and CSS Assets in Drupal 8 - Ian Carnaghan\" \/>\n<meta property=\"og:description\" content=\"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 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/\" \/>\n<meta property=\"og:site_name\" content=\"Ian Carnaghan\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-15T20:43:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-24T00:31:09+00:00\" \/>\n<meta name=\"author\" content=\"Ian Carnaghan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@icarnaghan\" \/>\n<meta name=\"twitter:site\" content=\"@icarnaghan\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Carnaghan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/\"},\"author\":{\"name\":\"Ian Carnaghan\",\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"headline\":\"Attaching JS and CSS Assets in Drupal 8\",\"datePublished\":\"2016-08-15T20:43:53+00:00\",\"dateModified\":\"2019-09-24T00:31:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/\"},\"wordCount\":432,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"keywords\":[\"Drupal\"],\"articleSection\":[\"Coding\",\"Content Management Systems\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/\",\"url\":\"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/\",\"name\":\"Attaching JS and CSS Assets in Drupal 8 - Ian Carnaghan\",\"isPartOf\":{\"@id\":\"https:\/\/www.carnaghan.com\/#website\"},\"datePublished\":\"2016-08-15T20:43:53+00:00\",\"dateModified\":\"2019-09-24T00:31:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.carnaghan.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Attaching JS and CSS Assets in Drupal 8\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.carnaghan.com\/#website\",\"url\":\"https:\/\/www.carnaghan.com\/\",\"name\":\"Ian Carnaghan\",\"description\":\"Software Developer, Blogger, Educator\",\"publisher\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.carnaghan.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5\",\"name\":\"Ian Carnaghan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g\",\"caption\":\"Ian Carnaghan\"},\"logo\":{\"@id\":\"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/\"},\"description\":\"I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.\",\"sameAs\":[\"http:\/\/www.carnaghan.com\",\"https:\/\/x.com\/icarnaghan\"],\"url\":\"https:\/\/www.carnaghan.com\/author\/icarnaghan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Attaching JS and CSS Assets in Drupal 8 - Ian Carnaghan","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/","og_locale":"en_US","og_type":"article","og_title":"Attaching JS and CSS Assets in Drupal 8 - Ian Carnaghan","og_description":"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 […]","og_url":"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/","og_site_name":"Ian Carnaghan","article_published_time":"2016-08-15T20:43:53+00:00","article_modified_time":"2019-09-24T00:31:09+00:00","author":"Ian Carnaghan","twitter_card":"summary_large_image","twitter_creator":"@icarnaghan","twitter_site":"@icarnaghan","twitter_misc":{"Written by":"Ian Carnaghan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/#article","isPartOf":{"@id":"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/"},"author":{"name":"Ian Carnaghan","@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"headline":"Attaching JS and CSS Assets in Drupal 8","datePublished":"2016-08-15T20:43:53+00:00","dateModified":"2019-09-24T00:31:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/"},"wordCount":432,"commentCount":0,"publisher":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"keywords":["Drupal"],"articleSection":["Coding","Content Management Systems"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/","url":"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/","name":"Attaching JS and CSS Assets in Drupal 8 - Ian Carnaghan","isPartOf":{"@id":"https:\/\/www.carnaghan.com\/#website"},"datePublished":"2016-08-15T20:43:53+00:00","dateModified":"2019-09-24T00:31:09+00:00","breadcrumb":{"@id":"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.carnaghan.com\/attaching-js-css-assets-drupal-8\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.carnaghan.com\/"},{"@type":"ListItem","position":2,"name":"Attaching JS and CSS Assets in Drupal 8"}]},{"@type":"WebSite","@id":"https:\/\/www.carnaghan.com\/#website","url":"https:\/\/www.carnaghan.com\/","name":"Ian Carnaghan","description":"Software Developer, Blogger, Educator","publisher":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.carnaghan.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/c689c24d516c51968a88b628860740a5","name":"Ian Carnaghan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f2aa5baca80c2be728de43a975185d91?s=96&d=retro&r=g","caption":"Ian Carnaghan"},"logo":{"@id":"https:\/\/www.carnaghan.com\/#\/schema\/person\/image\/"},"description":"I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.","sameAs":["http:\/\/www.carnaghan.com","https:\/\/x.com\/icarnaghan"],"url":"https:\/\/www.carnaghan.com\/author\/icarnaghan\/"}]}},"views":481,"_links":{"self":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts\/4423"}],"collection":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/comments?post=4423"}],"version-history":[{"count":0,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/posts\/4423\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/media?parent=4423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/categories?post=4423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/tags?post=4423"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/www.carnaghan.com\/wp-json\/wp\/v2\/post_series?post=4423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}