css - 如何在所有 Angular 组件中包含 Sass 主题？

Question

我想在 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 或其他类，我该怎么做？

是否可以仅包含一次 list 文件并自动包含在所有组件中？

我知道保持组件样式的原子性是一种很好的做法，但是如果我不能使用全局样式，我该如何实现设计系统呢？

Answer 1

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

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