Skip to content

Platform Specific CSS/Javascript with Cordova CLI

Cordova CLI has a really good setup for merging in content that is platform specific under the www directory.

Basically, under the merges directory, you can place platform specific directories; mimic the names under platforms. Under that you can create directories named the same as directories under wwwcssor js, for example, and the files under those directories will be copied to the platforms build directories by the cordova prepare command.

The merges directory is useful, but limited.

When we had a Cordova app mocked up by a great phonegap consultancy, the end deliverable included large chunks of common css, but some platform specific CSS. Cordova CLI has no issue with this. Another use case would be presenting a common interface for plugins for different platforms that have slightly different APIs–you can write platform specific adapter objects, and place the platform specific javascript into merges. Here’s an article about another purpose for merges.

merges are limited, because only directories under www is merged. If there is anything else you want to modify that is outside of that directory (like, say, AndroidManifest.xml), well, you are out of luck.

Luckily, hooks come to the rescue again. In the next post, I will discuss how to update platform specific files using Cordova CLI.

Subscribe to my infrequent Cordova newsletter

5 thoughts on “Platform Specific CSS/Javascript with Cordova CLI

  1. Chris says:

    Thanks for writing this – I am in desperate need of getting a working solution for a platform specific index.html for Android/iOS. Unfortunately when I put files in /merges/android/index.html and /merges/ios/index.html they don’t seem to be merging/copying into the final platform/www folder. Is there more to do here besides put files in the /merges/ dir structure? Please help!

  2. moore says:

    Hi Chris,

    I don’t think there’s anything else you need to do. What version of cordova or phonegap are you using?

  3. Chris says:

    I’m on 3.4.

    I just did a quick test after reading your article – same as you my index.html just had 1 different line for iOS/Android. But when I check the index.html in Eclipse after cordova build the line in the index.html is the same as the one from [project_root]/www/index.html not [project_root]/merges/android/index.html

  4. moore says:

    Right. Certainly seems like an bug. Here’s the merges doc:

    I’m sorry, I can’t see what is going wrong. You could try to run ‘cordova -d build’ to get more debug output. Maybe there’s a permission error?

  5. Chris says:

    I tried again this morning and it seems to be partially working. I found two index.html files in the Xcode project – one is wrong (not merged) and one is right (merged). The right (merged) one is sitting in some (new in CDV 3.4?) “Staging” folder? The wrong one is sitting in the /www folder in Xcode. Very odd/confusing definitely. But when I run on emulator/device the right (merged) index.html seems to be used on iOS so that’s good.

    Unfortunately from what I can tell Android is not getting the merged index.html – I searched whole /platforms/android for all index.html files – only one there – and it has the /www/index.html file not the /merges/android/index.html. I tried few times – but every time it gets the /www/index.html version.

    So, for now, my solution will be to keep the Android version in my /www/ folder and not bother with a /merges/android version.Anyhow – that’s my update for now. Thanks for your help.

Comments are closed.