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

Posted 2023-04-13

【中文标题】NativeScript/Angular - 如何导入全局样式？

【英文标题】：NativeScript/Angular - How to import global styles?

【发布时间】：2017-08-27 06:40:11

【问题描述】：

在 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 的构造函数中记录一些内容，所以我猜测某些东西会导致页面上的所有元素随着新的样式设置而消失。

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