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.所以我不确定进口是否会像这样做.

如何确保部分导入的样式在应用程序范围内应用？

编辑:

我发现这个,它成功导入我自己的风格融app.android.css和app.ios.css文件.但是..在我安装了SASS并完成此操作后,当我在模拟器中运行它时,应用程序完全空白,无论是在android还是ios中.

我没有错,没有.有没有人成功地让sass像这样工作？请让我知道如何获得奖励.

编辑2:

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

Answer 1

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

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

@tay hua 提供的答案是不正确的，因为它指的是 theangular-cli而不是 the nativescript-cli，所以如果您像我一样并且陷入困境，这就是您应该查看的答案。