Trouble with webpack and custom application wide css files


Hi there,

I’m currently having trouble with my NativeScript + TypeScript app (no angular involved!). My app doesn’t have an app.css file, instead it has app.light.css and app.dark.css files. One of them is loaded on app startup as it’s documented here:

Sadly my webpack configuration doesn’t seem to bundle these files. When my app is running, no css is loaded and applied. Does anyone has an idea on how to resolve this issue?

Here is my bundle-config.ts:

if ((<any>global).TNS_WEBPACK) {
    //registers tns-core-modules UI framework modules

    // register application modules
    // This will register each `page` postfixed xml, css, js, ts, scss etc. in the app/ folder
    const context = (<any>require).context('~/', true, /(page|fragment)\.(xml|css|js|ts|scss|less|sass)$/);

    global.registerModule('nativescript-drop-down', () => require('nativescript-drop-down'));
    global.registerModule('nativescript-fresco', () => require('nativescript-fresco'));
    global.registerModule('nativescript-pro-ui/sidedrawer', () => require('nativescript-pro-ui/sidedrawer'));
    global.registerModule('nativescript-ripple', () => require('nativescript-ripple'));
    global.registerModule('nativescript-statusbar', () => require('nativescript-statusbar'));

Any help would be really much appreciated!



Hi Sven,

By default NativeScript’s webpack config bundles a bunch of files, but if you have project-specific files (like fonts, custom named css files, webview content, etc) then you need to tell that to Webpack.

Open up webpack.config.js and look for a section that looks a bit like this, and add the stuff you need:

      new CopyWebpackPlugin([
        {from: "App_Resources/**"},
        {from: "**/*.tablet.css"}, // I've added this
        {from: "fonts/**"}, // I may have also added this
        {from: "**/*.jpg"},
        {from: "**/*.png"},
        {from: "**/*.xml"},
        {from: "pages/reporting/graph/**"}, // .. and this


Hi Eddy,

thanks a lot, I’m really getting closer to it. At least some css styles are now applied. :+1:

Sadly it’s still somehow broken… :disappointed_relieved: