NativeScript Angular 找不到 css 个文件

Question

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

NativeScript 在与我的组件相同的目录中找不到 css 个文件，即使指定了 moduleId。

// 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

我已经从模拟器、stopped/restarted 应用程序中擦除用户数据，四次检查文件名，但我仍然得到：

Refreshing application... JS: ns-renderer: ERROR BOOTSTRAPPING ANGULAR JS: ns-renderer: File /data/data/org.nativescript.Groceries/files/app/pages/login/.login.android.css does not exist. Resolved from: /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 组件的文件夹。

NativeScript Angular 找不到 css 个文件

NativeScript Angular can't find css files

nativescript

angular2-nativescript