Hi All,
I am trying to build Cordova App for Android (Using Meteor and Vue.js) and it seems that CSS included in a vue component file (whether css or scoped css) is not getting included in Cordova Application.
What have I done?
I have put a repo to reproduce the issue. (https://github.com/kasgarally/scopeissue
I have tried:
- Putting scss code (using fourseven:scss to compile the scss)
- Putting css code in a vue component
- Putting scoped css in a vue component
What is experienced?
The SCSS, CSS and Scoped CSS is working fine on a webapp (Chrome latest version as of date). Using Dev tools on Chrome, the css is showing properly on smaller viewport).
But when I run meteor run android-device, the SCSS shows up properly but not the CSS or Scoped CSS in a vue component.
It looks like the css in a vue component does not get included in the Cordova App. I do not know how to use any dev tools to check once an app is loaded onto the mobile device.
What am I using?
OS: Linux Mint 19.3 Cinnamon
Version: 4.4.8
Linux Kernel: 5.3.0-53-generic
Meteor@1.10.2
Android Studio 4.0
Android SDK installed:
Android 10.0 (Q) API Level 29
Android 9.0 (Pie) API Level 28 (read somewhere that Meteor requires this API level to compile properly. Higher levels are generating errors)
Android SDK Build-Tools 30-rc4
Android Emulator 30.0.1
What I have not tried?
I have not tried to set up a dev env on a Mac to see if this happens. I used to develop on both on Windows/Linux OS before, but since I read somewhere that Meteor will not longer support Building for Android platforms on Windows env, so I am switching my builds to be done from a Linux platform only.
I have also not tested this on an Android Emulator as this is too slow. I am testing directly on a physical phone (with USB Debugging enabled. So phone is in dev mode.)
Why am I asking this?
I know if I put the styling in the scss it will work, but the idea of using vue files would be to componentise (if this is a word) the element so it is more easily maintainable. I have quite a big project that I built using scoped css and then realised that this did not build well fro a Cordova App.
What help is requested?
Anyone knows whether this is a bug, or any work around to make this work?