NativeScript Angular 找不到 css 文件答案

【问题标题】：NativeScript Angular can't find css filesNativeScript Angular 找不到 css 文件
【发布时间】：2018-06-09 06:18:08
【问题描述】：

我刚刚开始使用 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

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

刷新应用程序... JS: ns-renderer: ERROR BOOTSTRAPPING ANGULAR JS：ns-renderer：文件 /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 的路径，但我得到了同样的错误。没有其他组件使用这些文件。我做错了什么？

更新：

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

【问题讨论】：

标签： nativescript angular2-nativescript

【解决方案1】：

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

这意味着任何.android 都将成为根.ts/.css/.html 文件。

login.android.css 变为 login.css

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

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

编辑：

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

【讨论】：