NativeScript/Angular - 如何导入全局样式？

Question

在一个NativeScript应用程序中，我试图应用一些全局样式，这些样式将在整个应用程序中共享。

这是我的结构：

- styles
 - partials
  - _buttons.scss
  - _exports.scss

_buttons.scss:

.flt-btn {
  border-radius: 35px;
}

_exports.scss:

@import '_buttons.scss';

app.css:

@import './styles/partials/_exports.scss';

正如您所看到的，.flt-btn 的样式应该被应用，但实际上并没有。

我在一个被延迟加载的特性模块 login 中使用了这个类，像这样：

<Button class="flt-btn" text="A button"></Button>

如果我直接将btn样式放在app.css中而不导入任何内容，它就可以工作，但由于这是一个CSS文件，我无法在其中使用SCSS。因此，我不确定通过这种方式是否会导入内容。

如何确保从部分导入的样式应用于整个应用程序？

编辑：

我发现了this，成功地将我的样式导入到app.android.css和app.ios.css文件中。但是...在我安装了SASS并完成这些步骤后，在模拟器中运行应用程序时，应用程序完全空白，无论是在Android还是iOS中。

我没有收到任何错误信息，什么都没有。有人能够成功地让SASS像这样工作吗？请告诉我如何操作，并且你会得到回报。

编辑2：

看起来应用正在运行，因为我可以在app.component.ts的构造函数中成功记录一些内容，所以我想可能是某些元素在使用新的样式设置后消失了。

- Chrillewoodz

Answer 1

我找到了这个指南：https://docs.nativescript.org/ui/theme#sass-usage

这是正确的方法。这将为Android和iOS创建一个scss/css文件，并创建一个_app-common.scss文件，您可以使用它来导入自己的自定义样式。然后这将应用于Android和iOS的css。

奇怪的是，组件scss在不安装类似上述的sass的情况下也能正常工作。但是，在安装sass之后，您不能再在组件的styleUrls属性中引用scss文件，而应该链接到css文件。我还没有弄清楚原因，但我想这并不重要，因为至少它能正常工作。

@tay hua提供的答案是错误的，因为它涉及到angular-cli而不是nativescript-cli，所以如果你和我一样被卡住了，那么这就是你应该看的答案。

- Chrillewoodz