Changes to css are not applied when using webpack bundler

[SephReed]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project): ✔ Getting NativeScript components versions information... ✔ Component nativescript has 5.4.0 version and is up to date. ✔ Component tns-core-modules has 6.0.0-next-2019-05-16-141945-01 version and is up to date. ✔ Component tns-android has 5.4.0 version and is up to date. ✔ Component tns-ios has 6.0.0-2019-05-16-165318-01 version and is up to date.

Describe the bug

If I update a css file while using the webpack bundler (soon to be required), the updates are not applied. Webpack does respond, outputting:

File change detected. Starting incremental webpack compilation... Webpack compilation complete. Watching for file changes. Webpack build done!

But no changes occur. The only way to apply the changes is to stop the emulator and restart tns debug ios.

To Reproduce

Using nativescript-core js, create some views without using any xml. Give the views classnames and create a css class that targets those classnames. Run tns debug ios, and update some css. Webpack will respond, but the updates will not be shown. Closing the app and re-opening will still not fix the issue.

Expected behavior Changes should either display automatically, or restart the app. The app should not have to be re-installed for every change to css.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/75065957-changes-to-css-are-not-applied-when-using-webpack-bundler?utm_campaign=plugin&utm_content=tracker%2F12908224&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F12908224&utm_medium=issues&utm_source=github).

[SephReed]

This also effects android.

Is anyone else getting these issues? Am I the only person who uses nativecsript without using vue, angular, or xml?

[NathanaelA]

@SephReed - You are the only one I know of doing development with out any xml/html (or some time of view type files). I've done it for some things (like plugins), or where I needed some weird control; but I find the xml is a lot lot easier to maintain... In fact that is one of my biggest issues with Flutter is the view in the code vs a separate view file...

However, there is a couple things you could try:

1. You can simply manually add the glob string to bring the css file over ALSO; and see if that helps with you close/re-open a screen.
2. You could use a plugin like ns-themes and have a button that has it re-load the css. :-)
3. You can add a simple refresh css call in your own livesync handler...

[SephReed]

Number #3 sounds like exactly the amount of control I want to have over this situation.

What is a livesync handler, and where can I register them. Also, is there a function for refreshing css? I've been searching for a "redo styling" function for months now.

[NathanaelA]

Refreshing the CSS -- Its an "internal" function, but it has been the same since like NS3 days... :grinning: page._onCssStateChange();

I should make a note the page variable is the topmost page; but you can call this also on layouts/containers and it will propagate the changes down to its children. But doing it at the top level; means everything is touched. :grinning: I should also note; some third party plugins might not propagate changes properly; if they weren't created properly and didn't tie in children/eachChild properly. I just ran into one today that didn't and had to do a minor work around...

As for the LiveEdit handler: application.on(event: "livesync", callback: (args: EventData) => void); It should be called on liveedit refreshes...

The application is the app reference you get from requiring the tns-core/application file..

[SephReed]

Hmmmm... no dice.

    app.on("livesync", (args: EventData) => {
        for (let i = 0; i < 100; i++) {
            console.log("------HERE IT IS------");
        }
    });

Tried putting it before app.start(). Tried putting it in internal pages.

And I'm using views, doing a fairly large project (a phone app). It's just that my views are functional, kind of like so:

stack("Burger", {
  onTap: () => console.log("Munch"),
}, [
  label("Bun", "Here's the first bun"),
  "Here's Lettuce (a label with no class name)",
  flex("Condiments", [
    stack("Ketchup", "I'm the Ketchup"),
    "Mustard",
  ]),
  "Patty",
  label("Bun", "And the last bun"),
]);

I'd love to share the code-base once I've fully battle tested it, but so far it's been pretty smooth to code with. Just run into a lot of weird bugs like this.

[SephReed]

Oh, and for this livesync output, I do get:

File change detected. Starting incremental webpack compilation... Webpack compilation complete. Watching for file changes. Webpack build done!

But nothing else.

[SephReed]

@NathanaelA

So what's this about...

You can simply manually add the glob string to bring the css file over ALSO; and see if that helps with you close/re-open a screen.

What's the "glob." Where can I interject on this thing? My css file is changing, webpack knows it... what can I do to just force this to happen?

[NathanaelA]

@SephReed - Here is the code I put in the app.ts file:

import { topmost } from "tns-core-modules/ui/frame";
application.on('livesync', (args) => {
    let curPage = topmost().currentPage;
    if (curPage) {
        curPage._onCssStateChange();
    }
});

This actually seems to be working for me... ;-) I was getting livesync notices. You do have to rebuild the app and re-run it. Changing the "app.js" file does not (frequently) re-apply any changes...

[NathanaelA]

As for the glob. Open up the webpack.config.js find the section around like 250; and add { from: { glob: '**/*.css' } }, to this:

 new CopyWebpackPlugin(
        [
          { from: { glob: 'fonts/**' } },
          { from: { glob: '**/*.css' } },
          { from: { glob: '**/*.jpg' } },
          { from: { glob: '**/*.png' } }
        ],

This will add .css files to be copied over also. (They will still get webpacked into the JS file, but you will get an additional copy; which can be useful for things like my NS-themes plugin)

[kdomingo]

There seems to be no updates on this. still happening on the latest version/NS8

[rigor789]

@kdomingo mind sharing an example/reproduction? CSS changes work fine on all of the apps I've worked on recently.