0

背景：我有一个包含 Angular（5.0.0，Dart 2.0.0）组件（我们称之为my_components）的包，我在许多客户项目（app_1，app_2，...）中使用它。这些应用程序必须覆盖我必须反映客户企业身份的几乎每个组件的一些 CSS 属性（例如颜色）。这里明显的选择是将值定义为app_n包中_variables.scss文件中的SASS 变量。（我不能使用 CSS 自定义属性，因为需要 IE 支持（我知道 Angular 不正式支持 IE））这里的问题是组件 scss 文件必须导入文件，所以my_components需要依赖app_n_variables.scss，这是不可能的。

我试图通过以下方式解决这个问题：在my_components我有一个文件lib/_variable.default.scss. 组件 scss 文件仍包含该行@import package:my_components/_variables.scss。我编写了一个InjectAssetsBuilder在 .default.scss 文件扩展名上运行并生成 .scss 文件的程序。该构建器是可配置的，并且需要在 app_n 的build.yaml'my_components|lib/_variables.scss': 'app_n|web/variables.scss'配置中进行映射。构建器应该由 .default.scss 文件触发，然后将自定义文件放在它旁边，以便可以通过组件导入找到它。

但是，我无法让它工作。如果我设置auto_apply为（在my_componentsall_packages的构建器定义中），构建器不会收到映射配置（来自app_n的构建目标部分）。如果我设置为，则构建器不再将my_components作为输入，因此它无法看到并被 .default.scss 文件触发。auto_applynone

如果有人以前处理过类似的问题（或者有另一个想法app_n如何将 SASS 变量注入my_components依赖项），我很想听听他们的想法。否则，如果有人可以向我解释构建配置的范围，我将不胜感激：

  1. 为什么auto_apply: all_packages构建器看不到app_n中的配置？
  2. 为什么app_n中目标定义的构建器无法看到my_components中的资产？

如果您认为我的配置有误，我可以尝试提取一个最小示例。

4

2 回答 2

1

我不相信将源代码生成到您所依赖的包中是构建系统中完全支持的选项。

在angular_components包中，我们为跨不同客户端应用程序共享的组件采用了另一种方法。我们已经确定了一个可用于更改外观的覆盖样式系统。

共享组件是使用一组良好的默认样式构建的。共享组件还提供了_mixins.scss一个包含一组 Sass mixin 的文件，供客户端应用程序导入。mixin 旨在正确覆盖更改组件主题所需的所有样式。

例如，这里是允许您更改单选按钮样式的mixin 。

于 2018-11-01T15:11:00.537 回答
0

事实证明，我的 build.yaml 配置和构建器本身存在一些错误，但我终于让它运行起来了。我在 pub 上发布了我的解决方案：https ://pub.dartlang.org/packages/inject_assets_builder

自述文件包含完整工作示例的说明。

如果您在应用程序的多个位置使用相同的组件并且只想设置其中一些样式，则 nshanans answer 是更好的选择。

于 2018-11-09T08:12:54.607 回答