NativeScript Angular无法找到css文件

Question

我刚刚开始使用NativeScript，并正在完成教程：https://docs.nativescript.org/angular/tutorial/ng-chapter-3

即使指定moduleId，NativeScript也无法在与我的组件相同的目录中找到css文件。

// login.component.ts

@Component({
  moduleId: module.id,
  styleUrls: [
    './login-common.css',
    './login.android.css',
  ],
  templateUrl: './login.html',
})
export class LoginComponent implements OnDestroy { ... }

我的目录结构是：

/app
  /pages
    /login
      login.android.css
      login-common.css
      login.component.ts
      login.html

我已经从模拟器中擦除了用户数据，停止/重新启动了应用程序，对文件名称进行了四重检查，但我仍然得到：

刷新应用程序... JS：ns-renderer：ERROR BOOTSTRAPPING ANGULAR JS：ns-renderer：File /data/data/org.nativescript.Groceries/files/app/pages/login/.login.android.css不存在。解析自：/data/data/org.nativescript.Groceries/files/app/pages/login/.login.android.css。

我也尝试不指定moduleId值和使用相对于/app的路径，我得到相同的错误。没有其他组件使用这些文件。我究竟做错了什么？

更新：

我已经制作了另一个组件，并且能够成功导入与组件相关的样式表。是否需要清除某种构建缓存？

Answer 1

当tns运行时实际构建您的应用程序时，它将重新编写与平台相关的文件。

这意味着什么.android将成为根.ts/.css/.html文件。

login.android.css成为login.css

iOS相关文件也是如此。这允许您只导入通用文件，它将智能地过滤掉运行时的正确文件。

在您的示例中，只需导入login.css而不是列出的两个样式表。在login-android.css文件中，导入login-common.css文件。

编辑：

关于moduleId，我总是建议应用你的组件。它使路径相对于当前文件夹。因此，如果你添加它，它将使'./导入相对于你的login组件的文件夹。