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

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

奇怪的是，组件scss无需像上面那样安装sass。但是在安装sass后，您不能再引用组件的scss属性中的styleUrls文件，而是应该链接到css文件。为什么这是我无法弄明白的，但我认为这不是什么大问题，因为它至少有效。

@tay hua提供的答案不正确，因为它引用了angular-cli而不是nativescript-cli，所以如果你像我一样得到了坚持这一点，这是你应该看到的答案。