css - 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 的构造函数中成功记录一些东西，所以我猜测是某些东西导致了页面上的所有元素随新样式设置一起消失。

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，所以如果您像我一样被困在这个问题上，这就是您应该查看的答案。