【问题标题】:How to include a Sass theme in all Angular Components?如何在所有 Angular 组件中包含 Sass 主题?
【发布时间】:2019-10-14 16:07:51
【问题描述】:

我想在 Angular 中使用 Sass 创建一个主题。

我使用文件的 Bootstrap 架构:

style/
|– main.scss   # Manifest file 
|– _alerts.scss     # Component file 
|– _buttons.scss    # Component file 
|– _mixins.scss     # Mixin file – imports all files from mixins folder
|–  ...             # Etc..
|– mixins/
|  |–  _alerts.scss # Alert mixin
|  |– _buttons.scss # Button mixin
|  |– ...           # Etc..

我想在组件的 sass 中使用一些 mixin 或其他类,我该怎么做?

是否可以只包含一次清单文件并自动包含在所有组件中?

我知道保持组件原子风格是一种很好的做法,但如果我不能使用全局风格,我该如何实现设计系统?

【问题讨论】:

  • 您将文件导入主 styles.scss 文件以使样式随处可用。要使用 mixin,您仍然需要将其导入相应的样式文件中
  • @chrispbacon 嗨 Cris,但我想使用 mixins 而不为每个组件 sass 包含它。我认为这不是一个好习惯。

标签: css angular sass


【解决方案1】:

您可以将您的main.scss 路径添加到angular.json,从而为所有组件使用您的自定义 SASS 主题。

具有一些全局样式的angular.json 文件示例:

【讨论】:

  • 好的,谢谢你的回答,但我不能在 sass 组件中使用 mixin,只有 scss 产生的样式。我也这样做了,但我遇到了问题,因为在 main.scss 中我还导入了字体并且我遇到了 Flash 字体问题。
猜你喜欢
  • 2017-04-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-02
  • 2019-02-23
  • 2022-08-08
  • 1970-01-01
  • 2017-06-20
相关资源
最近更新 更多