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

要回答我自己的问题，因为某天可能需要其他人解决，所以我提出了两种解决方法。

使用以下方法重新定义类：

if（mediumScreen）page.addCss（“。class {font-size：18}，.class2 {font-size：14}”）;

即使page.addCssFile（）无效，也足够有效。缺点是css表示被埋在了代码中，并且难以维护。

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

如果（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   
}

当然，更好的做法是将NativeScript Webpack配置为更智能。但是我不是webpack配置专家。

使用webpack时，未应用NativeScript分辨率特定的CSS（例如page.minWH600.css）

1 个答案: