微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

解决方法

我找到了这个指南: 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,所以如果你像我一样并且坚持这个,那么这就是你应该看的答案.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。