Trouble with webpack and custom application wide css files


#1

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: https://docs.nativescript.org/ui/styling#application-wide-css

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
    require('bundle-entry-points');

    // 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.registerWebpackModules(context);

    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!

Best,
Sven


#2

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
      ]),

#3

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:

Best,
Sven