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

在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的样式,但它们不是.

我在一个延迟加载的功能模块中使用该类,如下所示：

<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的构造函数中成功记录某些东西,所以我猜测某些东西导致页面上的所有元素都随着新的样式设置而消失.

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

奇怪的是,组件scss可以在不安装sass的情况下工作.但是在安装sass之后你不能再在组件的styleUrls属性中引用scss文件,它现在应该链接到css文件.为什么这是我无法弄清楚,但我想这不是什么大问题,因为它至少有效.

@tay hua提供的答案是错误的,因为它指的是angular-cli而不是nativescript-cli,所以如果你像我一样并且坚持这个,那么这就是你应该看的答案.

相关文章