Nativescript Angular中的平台特定css答案

【问题标题】：Platform-specific-css in Nativescript AngularNativescript Angular中的平台特定css
【发布时间】：2019-10-09 22:53:40
【问题描述】：

我正在尝试在我的 Nativescript Angular 移动应用中应用 platform-specific-css。

例如，对于 home 组件，目前我有 home.component.tns.css 来设置它的样式。但是我还需要为IOS和Android分别处理一些样式。

这是我尝试过的：

添加一个名为 home.component.ios.tns.css 的 css 文件。不工作，这个文件中的css不会被应用。
添加一个名为 home.component.ios.css 的 css 文件。这次应用了css。但是我在home.component.tns.css
我像这样在home.component.ios.css 中导入home.component.tns.css：@import './home.component.tns.css'; 这次我得到一个错误，说 NativeScript 遇到了致命错误：错误：无法解析 home.component.tns.css

我想我没有以正确的方式使用特定于平台的 css。有人可以帮忙吗？

【问题讨论】：

【解决方案1】：

除非你正在做一个共享项目（web + NS in 1 project）。

要在 NativeScript 中设置特定于平台的样式，您需要将文件命名为：

home.component.ios.css

home.component.android.css

在您的 home.component.ts 中，您将像这样设置样式绑定：

styleUrls: ['./home.component.css']

NativeScript 将采用相应的平台 .css 文件并使用特定于平台的样式表 .ios.css 或 .android.css 生成基本 home.component.css 文件的内容。

【讨论】：

Angular CLI 自动为我的组件生成了 5 个文件，包括：XX.component.html, XX.component.css, XX.component.ts, XX.component.tns.html,和 XX.component.tns.css。我正在使用带有 tns 后缀的文件来开发我的 nativescript 项目。目前我确实在styleUrls 中导入了home.component.css，并且...tns.css 中的样式将起作用（这都很好）。我的问题是，如果我创建文件home.component.ios.css，只有这个文件可以工作，...tns.css 文件将被忽略。

【解决方案2】：

您无法导入home.component.tns.css，因为只有home.component.css 可用。

你可以把你所有的CSS放在home.component.ios.css。
或者您可以使用 .android 和 .ios 类，例如：

.ios .myClass {
    background-color: red;
}

.android .myClass {
    background-color: blue;
}

【讨论】：

有没有办法让 home.component.ios.css 和 home.component.tns.css 都可用？因为我确实需要 ....tns.css 文件来存储一些共享的 css 代码，并需要 ....ios.css / ....android.css 文件来存储特定于平台的 css。

【解决方案3】：

平台特定的文件应该是这样的：

【讨论】：