使用 webpack 时未应用 NativeScript 解析特定 css（例如 page.minWH600.css）

Question

当我将 webpack 添加到我的 NativeScript iOS 应用程序以捆绑它以准备发布时，我发现我用于针对不同屏幕分辨率的各种 some-page.minWH600.css “限定符”文件不再加载。 （见NativeScript docs for supporting multiple screen sizes using qualifiers）

然后我进行了一些重构以测试小型、中型和大型平板电脑屏幕，计划通过...以编程方式添加一个 .css 文件...

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

...但是由于webpack中的页面捆绑发现，page.addCssFile()也不起作用。

有没有人有其他解决方案来添加 css 类以支持与 webpack 一起使用的不同屏幕分辨率？

我可以想到显而易见的事情：使用许多 getViewById() 调用并向每个视图添加 NS/js 属性和/或 css 样式（或 css 类），但这很费力而且很麻烦...

我宁愿以某种方式重新定义相关的 css 类，就像我在捆绑 webpack 之前所做的那样，但我不知道这是否可能？

Answer 1

为了回答我自己的问题，因为有一天其他人可能不得不解决这个问题，我想出了两个解决方法。

1. 只需使用以下方法重新定义类：

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

奇怪的是，即使 page.addCssFile() 不起作用。缺点是 css 呈现方式被埋没在代码中，维护性较差。

1. 通过使用“nativescript-dom”插件按类收集所有视图并定义一个函数以将“.classTablet”添加到包含“.class”的所有视图中，我能够将所有 css 保存在一个 css 中文件以便于维护。我只是将更大屏幕尺寸的类添加到该文件并使用：

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

调用全局函数：

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   
}

1. 当然，最好将 NativeScript webpack 配置为更智能。但我不是 webpack 配置大师。