Article
6 comments

Adding assets in Grails 3

When using modern web development technologies, you often come across frameworks or libraries which use additional resources apart from css stylesheets, images and javascript. One such example is Font Awesome, which needs sone font files, located in the /fonts subdirectory of the unzipped package. In Grails 2 lazy coders would put this directory in the /wep-app folder. In Grails 3 you should (!) use the asset pipeline for these files to and here are two ways that work:

  1. Simply put the files into the grails-app/assets/stylesheets folder. This is not a very elegant way nor is it the intended way to use the asset pipeline.
  2. Put the fonts directory parallel to stylesheets, images and javascript into the grails-app/assets/ folder. For the asset pipeline to know the new directory, specify it in the build.gradle file:

    Last thing to do is to patche the font file paths in the font-awesome.css and/or font-awesome.min.css file. Just remove the “../fonts/” part of the url() path, so they all look like this:

    Thats all.

This post by David Estes put me on the right track, since the official documentation doesn’t mention Grails 3 issues. Thanks David!

6 Comments

  1. Hi Volker,

    Thanks for excellent post.

    I am trying to achieve same with a twist but not found any success yet. I have fonts folder inside my plugin.

    Projetcs
    =========
    MyApp > pluginOne > pluginTwo

    I have my fonts folder inside pluginTwo. I add the above setting but no help. My system cant recognize the fonts :(

    I found a setting for plugin but adding it inside build.gradle and application.groovy dosent made any difference.
    grails.assets.plugin.”plugin-name”.includes=[“fonts/*”]

    Any help appreciated.

    Reply

  2. Useful post :-)

    In fact, you dont need to patch the CSS files.
    As described in http://www.asset-pipeline.com/manual/#search-paths : Relative Urls

    All CSS type files go through a processor called the CssProcessor. This processor looks for any url(../path/to/file.png) type patterns and automatically resolves the asset from the asset-pipeline. If it finds the matching file, the url is automatically replaced with the correct url pattern including the digest name: url(path/file-dadvbfgdaf123e.png).

    Reply

  3. When you download fontawesome, the zip contains not only the fonts, but less and scss files and dirs also. What should we do with these files? Any help appreciated.

    Reply

  4. How does one access the fonts once they are put into the fonts dir and the build.gradle has been updated? Is there a line which needs to be added to application.css, or some manual include path which needs to be added to the mail layout? If so, what is the link exactly? I have tried many paths, but nothing working so far.

    Reply

Leave a Reply

Required fields are marked *.