--bundle ruins css

[laimonas]

Created new project --ng with angular 5.
Added npm install --save-dev nativescript-dev-webpack
running tns run android everything is ok
running tns run android --bundle listview has no styles.

[berchik]

This is probably because
@import '~nativescript-theme-core/css/core.light.css' (or similar) in your app.css is not bundled with webpack. I have the same issue.

[laimonas]

@berchik do you found solution how to solve this?

[berchik]

One way would of course be to copy manually the android/ios css files from /node_modules/nativescript-theme-core/css/ to your app/css, but this is quite dirty. I’m trying to look into webpack.config.js but no success yet.

[milansar]

Have same problem as mentioned by @berchik , after upgrading and following upgrade document changed @import 'nativescript-theme-core/css/core.light.css' to @import '~nativescript-theme-core/css/core.light.css' in app.css. after bundling app all styles defined in theme core does not apply so it appears that theme core is not copied as it use to be

[NickIliev]

@berchik @laimonas @milansar confirming this as a bug reproducible only when bundling on Windows.

Steps to reproduce:

• use this demo application
• CLI build with tns run android applies the nativescript themefromapp.css` as expected
• Bundling with Webpack is not applying the theme styles

Reproducible only on Windows - everything works as expected on Mac (@berchik @laimonas @milansar can you confirm that you are building in Windows environment)

[laimonas]

@NickIliev yes i'm using windows 10.

[berchik]

@NickIliev yes the issue is on win10.
Moving it to OSX the style is applied correctly, but the app is frozen, not sure yet why.
So I can't comment on using --env.aot/snapshot/uglify for now.

[milansar]

@NickIliev yes i'm using windows 10

[behi1ty]

i'm using windows 10 and not set app.css :"@import '~nativescript-theme-core/css/core.light.css';" after use "tns run android --bundle" but use "tns run android" that is ok!

[AmithRamesh]

I am facing the same issue on Mac os X as well. The theme core styles are not being applied with 'tns run android --bundle'. Not tried ios build with webpack yet. But 'tns run android' works fine.

Update: I guess entire app.css isn't applied with --bundle

[sis0k0]

Hey, everyone. You can apply that fix b1d3bcb manually in your webpack configurations until #385 is merged and released.

[berchik]

Thanks Stanimira,

For win10 I can confirm “~” is resolved correctly as the path relative to node_modules.
However “~/” is not resolved correctly, but using “./” in app.css instead is ok.

--env.uglify is working too
--env.aot fails

[AmithRamesh]

Thank you for the fix @sis0k0 .

On mac, the app.css was not bundled because vendor.js wasn't updated, it was fixed after running "./node_modules/.bin/update-ns-webpack --configs --deps" from this guide.

Now as @berchik mentioned, only --env.aot is failing.

[AmithRamesh]

Referring #386 for --env.aot issue. It works.