NativeScript angular screen qualifier scss files


#1

I’ve been unsuccessful at getting screen qualifiers to work in Angular.

The component is compiled before being deployed to the device.

@Component({
    selector: 'plugin-user-login',
    templateUrl: 'user-login.component.ns.html',
    styleUrls: ['user-login.component.ns.css'],
    moduleId: module.id
})

I’m using the nativescript-dev-sass to transpile SCSS files to CSS files.

Is there a solution for screen qualifier labelled scss files to be used at run time?


#2

Unfortunately nativescript-angular, or rather angular doesn’t support that, it would break AOT-compiling/bundling.

Nativescript doesn’t support @media-selectors either, but you could detect screen size/orientation in code and apply CSS-classes accordingly.


#3

You could try NathanaelA’s suggestion here:
https://github.com/NativeScript/NativeScript/issues/64#issuecomment-304099292


#4

My colleague assisted me with the following solution.

@Component({
    selector: './plugin-user-login',
    templateUrl: './user-login.component.web.html',
    styleUrls: [switchStyleUrls('../plugin-user.scss')],
    moduleId: module.id
})

Pass in the function to select the styleUrls

export function switchStyleUrls(styleUrl: string): string {

    switch (Platform.deviceSize()) {
        case DeviceSizeE.dpi326:
            return styleUrl.replace(".css", ".minWH326.css");

        case DeviceSizeE.dpi401:
            return styleUrl.replace(".css", ".minWH401.css");

        case DeviceSizeE.default:
            return styleUrl;
    }
}

The Platform.deviceSize() returns the DeviceSizeE based on platformModule.screen.mainScreen.widthPixels


#5

It looks like an interesting solution, but I don’t think it can work with AOT builds.

Maybe someone smarter than me could make it work, but I get this error from npm run start-android-bundle:

ERROR in Error encountered resolving symbol values statically. Calling function 'switchStyleUrls', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol ItemsComponent in /home/mabs/projects/ng-screensize-css/app/item/items.component.ts, resolving symbol ItemsComponent in /home/mabs/projects/ng-screensize-css/app/item/items.component.ts