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 的样式，但实际上没有。

我在延迟加载的功能模块中使用 class，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：

看起来应用程序是运行ning，因为我可以在 app.component.ts 的构造函数中成功记录一些东西，所以我猜测是某些东西导致了页面上的所有元素随新样式设置一起消失。

Answer 1

这是解决此问题的正确方法。这将为 android 和 ios 创建一个 scss/css 文件，并创建一个 _app-common.scss 文件，您可以使用该文件导入您自己的自定义样式。然后这将应用于 android 和 ios css。

奇怪的是，组件 scss 无需像上面那样安装 sass 即可工作。但是在安装 sass 之后，您不能再在组件的 styleUrls 属性中引用 scss 文件，它现在应该 link 到 [=13] =] 文件。为什么这是我一直无法弄清楚的，但我想这没什么大不了的，因为它至少有效。

@tay hua 提供的答案不正确，因为它指的是 angular-cli 而不是 nativescript-cli，所以如果你喜欢我被卡住了，这是你应该看的答案。

NativeScript/Angular - How to import global styles?