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

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

刷新应用程序...... 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的路径，我得到相同的错误。没有其他组件使用这些文件。我做错了什么？

更新

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

Answer 1

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

这意味着任何tns只会成为根.android文件。

.ts/.css/.html变为login.android.css

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

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

编辑：

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

NativeScript Angular无法找到css文件

1 个答案: