Screen qualifiers not recognized by webpack

[alexZaicev]

ENVIRONMENT
Your ANDROID_HOME environment variable is set and points to correct directory.
√ Your adb from the Android SDK is correctly installed.
√ The Android SDK is installed.
√ A compatible Android SDK for compilation is found.
√ Javac is installed and is configured properly.
√ The Java Development Kit (JDK) is installed and is configured properly.
√ Local builds for iOS can be executed only on a macOS system. To build for iOS on a different operating system, you can use the NativeScript cloud infrastructure.
√ Getting NativeScript components versions information...
√ Component nativescript has 5.4.0 version and is up to date.
√ Component tns-core-modules has 5.4.0 version and is up to date.
√ Component tns-android has 5.4.0 version and is up to date.
‼ Update available for component tns-ios. Your current version is 5.3.1 and the latest available version is 5.4.0.

node --version:
v10.14.0

PACKAGE.JSON

"dependencies": {
"nativescript-appversion": "^1.4.1",
"nativescript-barcodescanner": "^3.0.0",
"nativescript-checkbox": "^3.0.3",
"nativescript-email": "^1.5.3",
"nativescript-https": "^1.0.3",
"nativescript-imagepicker": "^6.0.6",
"nativescript-iqkeyboardmanager": "^1.3.0",
"nativescript-phone": "^1.4.0",
"nativescript-plugin-firebase": "^8.3.2",
"nativescript-pulltorefresh": "^2.2.0",
"nativescript-statusbar": "^5.0.0",
"nativescript-text-justify": "^1.1.1",
"nativescript-theme-core": "^1.0.4",
"nativescript-ui-chart": "^4.0.2",
"nativescript-ui-sidedrawer": "^5.1.0",
"nativescript-zxing": "^1.5.8",
"tns-core-modules": "^5.4.0"
},
"devDependencies": {
"nativescript-dev-sass": "^1.7.0",
"nativescript-dev-typescript": "~0.7.0",
"nativescript-dev-webpack": "^0.22.0",
"tslint": "^5.12.0"
}

Describe the bug
On Windows 10 when running tns run/debug android --hmr/--bundle, it does not compile SCSS files located inside the component. It reads the color and text size values that I specified in a separate file as well as default styling of UI widgets, but it refuses to compile or load component styles.

When building without webpack, everything works as it should, and the files compiled down to CSS. I thought the problem might be in the old version of webpack, but I upgraded to the latest version, and the issue is still there

[Fatme]

I thought the problem might be in the old version of webpack, but I upgraded to the latest version, and the issue is still there

Do you have updated your webpack.config.js file as well?

More info about the update procedure can be found here.

[alexZaicev]

Yes, I did and didn`t work. Tried it again now, just to make sure, still the same issue

[alexZaicev]

I think I found the cause of the issue, my component layout XML has screen qualifiers that use different classes. Maybe that`s making it nuts.. but why is it working without bundling?

[alexZaicev]

Did anyone look into this issue? Webpack does not seem to be using qualifiers at all.....

[NathanaelA]

@alexZaicev - any chance you can create a small test case?

[alexZaicev]

@NathanaelA I`ve created a test repo

https://github.com/alexZaicev/webpack-bug-test

It has an alert modal view that has 3 different qualifiers (420dpi, 400dpi and 360dpi) with different width for the dialog. When I run it with a --no-bundle (Legacy Workflow since {NS} 5.4) it works fine, but with Webpack Workflow it does not want to use layouts with qualifiers

[rosen-vladimirov]

Hey @alexZaicev ,
Thanks for reporting this issue and for preparing the sample project. We've confirmed its a missing implementation on our side when using bundle workflow and we are actively working on fixing it. Thanks a lot for all the details, it really helped us to determine exactly where the problem is.