构建时的角度主题？

Question

各位程序员们，

我正在尝试找到一个优雅的解决方案来为我们的 Angular 应用程序设置主题……但在构建时。为不同的客户单独构建。

有人对如何做有任何想法吗？理想情况下不喜欢使用 Angular CLI 的 environment.ts 功能，因为这需要为所有客户环境制作 dev/qa/prod 的副本。

另一个问题是……我们使用 Angular Material。

基本上...

Angular 应用程序如何在构建时具有跨组件和主题 Angular Material 的全局颜色？我想即使运行时也是一个不错的后备。

Answer 1

• 运行时自定义

  • 主题中的 CSS 变量 var(--main-bg-color)，但不适用于所有组件。
  • 生成多个主题并延迟加载它们（我没有尝试过）。我们可以在 Angular 应用程序中创建多个全局样式。适合客户的加载样式，可以是服务器端渲染或动态 CSS 链接。

  “样式”：[ "src/styles.scss", { "input": "src/customer-a.scss", "bundleName": "customer-a" } ],

• 构建时自定义

  • 它将类似于环境文件。
  • 您必须为每个客户创建单独的文件（theme-customer-a、theme-customer-b 等）。
  • 使用 style.scss 中的 theme.scss 文件，可以是默认主题。
  • 在构建之前，将客户的文件复制为 theme.scss
  • 您可以将 SCSS 变量用于主题，然后为每个客户创建单独的变量文件，而不是为每个客户创建完整的主题文件。