5

在 NativeScript 应用程序中，我尝试应用一些将在应用程序中共享的全局样式。

这是我的结构：

- styles
 - partials
  - _buttons.scss
  - _exports.scss

_buttons.scss：

.flt-btn {
  border-radius: 35px;
}

_exports.scss：

@import '_buttons.scss';

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

4

1 回答 1

2

我找到了这个指南：https ://docs.nativescript.org/ui/theme#sass-usage

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

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

@tay hua 提供的答案是不正确的，因为它指的是angular-cli而不是nativescript-cli，所以如果你像我一样被困在这个问题上，这就是你应该看的答案。

于 2017-04-12T08:32:38.380 回答