I created a custom Drupal 8 module. I am now trying to add JavaScript and CSS files using the my_module.libraries.yml file and the following code, which doesn't work.
lrv_key:
version: 1.x
js:
js/lrv.js: {}
dependencies:
- core/jquery
- core/drupalSettings
css:
theme:
css/lrv.css: {}
How can I correctly add CSS and JavaScript files to pages from a module?
A .libraries.yml file used from a module doesn't tell Drupal to attach the JavaScript and CSS files defined from the library to every page. To attach the library when some conditions are met, a module should implement hook_page_attachments().
function mymodule_page_attachments(array &$attachments) {
if (\Drupal::currentUser()->isAuthenticated()) {
$attachments['#attached']['library'][] = 'my_module/lrv';
}
}
Using that code, the library would be attached to every page visited from a logged-in user. Attaching the library to every page, even when they are requested from anonymous users just require implementing a hook similar to the following one.
function mymodule_page_attachments(array &$attachments) {
// Unconditionally attach the mymodule/lrv library.
$attachments['#attached']['library'][] = 'my_module/lrv';
}
The library definition shown in the question contains an error: The dependencies key should not be a sub-key of the js nor the css key, but it should be at the same level of the js and css keys. See how Drupal core defines its libraries, for example the ones defined in core.libraries.yml. (I removed the comment lines from the definitions I copied.)
jquery:
remote: https://github.com/jquery/jquery
version: "3.2.1"
license:
name: MIT
url: https://github.com/jquery/jquery/blob/3.2.1/LICENSE.txt
gpl-compatible: true
js:
assets/vendor/jquery/jquery.min.js: { minified: true, weight: -20 }
jquery.cookie:
remote: https://github.com/carhartl/jquery-cookie
version: "v1.4.1"
license:
name: MIT
url: https://github.com/carhartl/jquery-cookie/blob/v1.4.1/MIT-LICENSE.txt
gpl-compatible: true
js:
assets/vendor/jquery.cookie/jquery.cookie.min.js: { minified: true }
dependencies:
- core/jquery
jquery.farbtastic:
remote: https://github.com/mattfarina/farbtastic
version: "1.2"
license:
name: GNU-GPL-2.0-or-later
url: https://github.com/mattfarina/farbtastic/blob/master/LICENSE.txt
gpl-compatible: true
js:
assets/vendor/farbtastic/farbtastic.js: { minified: true }
css:
component:
assets/vendor/farbtastic/farbtastic.css: {}
dependencies:
- core/jquery
Putting the dependencies key in the wrong place would not allow Drupal to load the libraries from which your library depends. Your library would work only when Drupal already loaded the core/jquery and the core/drupalSettings libraries for other libraries.
This and not implementing hook_page_attachments() are two possible reasons for your library not to work; another reason could be errors in the JavaScript code or in the CSS code (for example a wrong CSS selector).
The hook_page_attachments() implementations I shown use the following library definition.
lrv:
version: 1.x
js:
js/lrv.js: {}
css:
theme:
css/lrv.css: {}
dependencies:
- core/jquery
- core/drupalSettings
The name of the library is my_module/lrv because it is defined as key lrv (the one I used in the code I shown) in the file my_module.libraries.yml (the one you seem to use).
See Defining a library and Attaching a library to page(s).
What I described in this answer is valid only for modules: Themes just need to use a .libraries.yml file. Drupal will attach the libraries defined in the active theme to every page.
That is done in system_page_attachments(), which uses the following code. (See the comment before the quoted code.)
// Attach libraries used by this theme.
$active_theme = \Drupal::theme()->getActiveTheme();
foreach ($active_theme->getLibraries() as $library) {
$page['#attached']['library'][] = $library;
}
$variables['#attached']['library'][] = 'module/lib';
system_page_attachments().
This is because you've got this formatted incorrectly. Your dependencies are on the library itself, not for the js or css components individually. Assuming you have a js file at YOUR_MODULE/js/lrv.js and a css file at YOUR_MODULE/css/lrv.css you should update your declaration like so:
lrv_key:
version: 1.x
js:
js/lrv.js: {}
css:
theme:
css/lrv.css: {}
dependencies:
- core/jquery
- core/drupalSettings
You can read more in the Defining a library section of the drupal docs.
One note I'll make is that you may want to define your css under component rather than theme, but I'm not sure exactly what you're doing. You can read more about component vs theme in the defining a library section referenced above.
