NativeScript resolution specific css (eg page.minWH600.css) not applied when using webpack

Question

As I added webpack to my NativeScript iOS app to bundle it in preparation for release, I discovered that the various some-page.minWH600.css "qualifier" files I was using to target different screen resolutions are no longer loading. (See NativeScript docs for supporting multiple screen sizes using qualifiers)

I then refactored a bit to test for small vs medium vs large tablet screens, planning to add a .css file programmatically via...

if (mediumScreen) page.addCssFile(app.minWH600.css);

...but discovered due to the bundling of pages in webpack, page.addCssFile() doesn't work either.

Does anyone have another solution to add css classes to support different screen resolutions that works with webpack?

I can think of the obvious: using many getViewById() calls and adding either NS/js properties and or css styles (or a css class) to each view, but that's laborious and kludgey...

I'd prefer to somehow redefine the relevant css classes on the fly like I was able to before bundling with webpack, but I don't know if that is possible?

Tim · Accepted Answer · 2018-08-01 17:29:52Z

0

To answer my own question, because someone else may have to solve this someday, I came up with two workarounds.

Simply redefining the class using:

if (mediumScreen) page.addCss(".class {font-size:18 }, .class2 {font-size: 14}");

Oddly enough that works, even though page.addCssFile() does not. The disadvantage is that the css presentation is buried in the code and this is less maintainable.

By using the "nativescript-dom" plugin to gather all the views by class and defining a function to add ".classTablet" to all views containing ".class", I was able to keep all the css together in one css file for easier maintenance. I simply added the class for the larger screen size to that file and use:

if (tabletScreen) addSizeClass("welcomeButton","welcomeButtonTabletSize");

which calls the global function:

require("nativescript-dom"); // must install this nativescript plugin 
addSizeClass = function(className, newSizeClassname) {
    // note page is a global variable and is set in onNavigatedTo
    var items = page.getElementsByClassName(className); //getElementsByClassName() is from nativescript-dom plugin
    items.forEach((item) => { item.className += " " + newSizeClassname; }); //define and maintain a new size class in app.css   
}

Of course, better yet might be configuring NativeScript webpack to be smarter. But I am no webpack configuration guru.

answered Aug 1, 2018 at 17:29

Tim

864 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tim Over a year ago

Got this answer back on slack too... Well, there are some possibilities to do that. First, I think you can require css file as you would do with js file (see stackoverflow.com/questions/44474484/…). Second, you can bypass webpack and simply copy css files in the bundle. Third, you can wrap your css-classes inside another class, for example page-400, page-600 and page-800 and then add the class programatically on the outer layout of your page using layout.className = pageWidth >= 800 ? 'page-800' : pageWidth >=600 ? 'page-600' : 'page-400'

Collectives™ on Stack Overflow

NativeScript resolution specific css (eg page.minWH600.css) not applied when using webpack

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related