本地脚本角度的特定于平台的css

Question

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

例如，对于home组件，当前我具有home.component.tns.css对其进行样式设置。但是我还需要分别为IOS和Android处理一些样式。

这是我尝试过的：

1. 添加名为home.component.ios.tns.css的CSS文件。无法正常工作，此文件中的css将不会应用。
2. 添加名为home.component.ios.css的CSS文件。这次应用了CSS。但是我在home.component.tns.css
中丢失了CSS
3. 我像这样在home.component.tns.css中导入home.component.ios.css：@import './home.component.tns.css';这一次，我收到一条错误消息，

   NativeScript遇到致命错误：错误：无法解析home.component.tns.css

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

Answer 1

除非您正在执行共享项目（Web + NS in 1个项目）。

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

home.component.ios.css

home.component.android.css

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

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

NativeScript将获取各自的平台.css文件，并使用平台特定的样式表home.component.css或.ios.css生成基本.android.css文件的内容。

Answer 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;
}