1

I created a custom module in drupal 8. And I am trying to add js and css file in my_module.libraries.yml file using this

lrv_key:
  version: 1.x
  js:
    js/lrv.js: {}   
    dependencies:
      - core/jquery
      - core/drupalSettings
  css:
    theme:
      css/lrv.css: {}

But it doesnt work.

5

To understand how to correctly define a library, see how Drupal core defines its library, for example the ones defined in core.libraries.yml.

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
  # @todo Ping @robloach or @mattfarina to retroactively create this release.
  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

The dependencies key is not a sub-key of js, nor css, but it is at the same level of the js and css keys.
Keep in mind that the dependencies key defines the dependencies of the library from other libraries.

I would rather use the following library declaration.

lrv:
  version: 1.x
  js:
    js/lrv.js: {}   
  css:
    theme:
      css/lrv.css: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

A .libraries.yml file just defines the libraries, which aren't automatically loaded, since the definition doesn't say to Drupal when they should be loaded.
To load your library, for example in hook_page_attachments(), you use code similar to the following.

function mymodule_page_attachments(array &$attachments) {
  $attachments['#attached']['library'][] = 'mymodule/lrv';
}

The name of the library is mymodule/lrv because it is defined as key lrv (the one I used in the code I shown) in the file mymodule.libraries.yml (the one you seem to use).

See Defining a library and Attaching a library to page(s).

  • can you attach using a hook_field_preprocess? or how would you attach only when a field level? – awm Dec 20 '18 at 16:46
  • yup it did work $variables['#attached']['library'][] = 'module/lib'; – awm Dec 20 '18 at 16:51
2

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.

  • Thanks,, I used this code but still same... I am not looking my js and css file included – user82753 Jun 10 '18 at 5:02
  • 2
    @amitjoshi While you may have defined in library in .libraries.yml you still need to attach that library somewhere. Read the "Attaching a library to page(s)" part on the link provided in this answer. – No Sssweat Jun 10 '18 at 5:15
  • @NoSssweat I used this code in my .module file.function lrv_page_attachments(array &$attachments) { $attachments['#attached']['library'][] = 'lrv/lrv.css'; } but same. no result – user82753 Jun 10 '18 at 5:36
  • @amitjoshi That is not the name of the library, which is lrv_key. – kiamlaluno Jun 10 '18 at 7:54
  • @amitjoshi needs to be $attachments['#attached']['library'][] = 'my_module/lrv_key'; – No Sssweat Jun 11 '18 at 2:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy