Consistent place to put app-wide styles in web and mobile

[tjvantoll]

Currently when you start a new app using {N} schematics you need to put your global web CSS in a styles.css file, and your global {N} CSS in an app.css file.

My suggestion is that we switch the {N} global file to styles.tns.css, and inject the appropriate code so that {N} uses that file instead of app.css. It’ll make this project structure a lot easier to explain to newcomers to this setup.

[sis0k0]

Hey @tjvantoll! Thanks for the suggestion!

The mobile app-wide css file is named app.css because the default webpack build is configured to use that name. Unfortunately, there is no easy way to change the name of the file. It requires modifying the webpack.config.js file and loading the renamed file manually. More specifically, it takes 16 additions and 6 deletions.

We've got a few options for implementing the change:

1. Change the default name from app.css to styles.tns.css only for code sharing apps. A possible disadvantage is that we will have to maintain a separate webpack configuration.

2. Exposing the app-wide css file name in nsconfig.json. We can have a property in the nsconfig.json file that specifies the name for the mentioned file. Something like:

nsconfig.json

{
  "styles": [
    "src/styles.tns.css"
  ],
  "appResourcesPath": "App_Resources",
  "appPath": "src"
}

The value from nsconfig.json can be provided to webpack during build. However, if someone changes the name of the file, they will have to update the configuration file as well.

@tjvantoll, @vakrilov, @rosen-vladimirov, what do you think about these suggestions? Do you have other ideas?

[tjvantoll]

Hey @sis0k0,

I think I like the second approach, since we’ve set that pattern as a way you configure other important paths in your {N} apps.

Overall, this is a nice-to-have and not a necessity, so I’d hate to see us introduce complexity just to get some consistency, but if we can get things done by adding a property to the existing nsconfig that we use for code-sharing apps then 👍 from me.