dart build:需要将应用程序中的资产注入到依赖包中
dart build: Need to inject an asset from an application into a dependency package
背景:我有一个包含 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 文件必须导入 _variables.scss
文件,所以 my_components 需要依赖 app_n,这是不可能的。
我尝试通过以下方式解决此问题:在 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
设置为 all_packages
(在 my_components 的构建器定义中),构建器不会收到映射配置(来自构建app_n 中的目标部分)。如果我将 auto_apply
设置为 none
,构建器不再将 my_components 作为输入,因此它无法看到也不会被.default.scss 文件.
如果有人以前处理过类似的问题(或有其他想法 app_n 如何将 SASS 变量注入 my_components 依赖),我很想听听他们的想法。否则,如果有人可以向我解释构建配置的作用域,我将不胜感激:
- 为什么
auto_apply: all_packages
生成器看不到 app_n 中的配置?
- 为什么 app_n 中目标定义的构建器无法看到 my_components 中的资产?
如果您认为我的配置有误,我可以尝试提取一个最小的示例。
我不认为将源代码生成到您依赖的包中是构建系统完全支持的选项。
在 angular_components 包中,我们对在不同客户端应用程序之间共享的组件采用了另一种方法。我们已经确定了一个可用于更改外观的覆盖样式系统。
一个共享组件是用一组很好的默认样式构建的。共享组件还提供了一个 _mixins.scss
文件,其中包含一组 Sass 混合宏,供客户端应用程序导入。 mixins 旨在正确覆盖更改组件主题所需的所有样式。
例如这里的 mixin 允许您更改单选按钮的样式。
原来我的 build.yaml 配置和构建器本身有一些错误,但我终于搞定了 运行。我在 pub 上发布了我的解决方案:https://pub.dartlang.org/packages/inject_assets_builder
README 包含完整工作示例的说明。
如果您在应用中的多个位置使用相同的组件并且只想对其中的一些进行样式设置,nshanans answer 是更好的选择。
背景:我有一个包含 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 文件必须导入 _variables.scss
文件,所以 my_components 需要依赖 app_n,这是不可能的。
我尝试通过以下方式解决此问题:在 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
设置为 all_packages
(在 my_components 的构建器定义中),构建器不会收到映射配置(来自构建app_n 中的目标部分)。如果我将 auto_apply
设置为 none
,构建器不再将 my_components 作为输入,因此它无法看到也不会被.default.scss 文件.
如果有人以前处理过类似的问题(或有其他想法 app_n 如何将 SASS 变量注入 my_components 依赖),我很想听听他们的想法。否则,如果有人可以向我解释构建配置的作用域,我将不胜感激:
- 为什么
auto_apply: all_packages
生成器看不到 app_n 中的配置? - 为什么 app_n 中目标定义的构建器无法看到 my_components 中的资产?
如果您认为我的配置有误,我可以尝试提取一个最小的示例。
我不认为将源代码生成到您依赖的包中是构建系统完全支持的选项。
在 angular_components 包中,我们对在不同客户端应用程序之间共享的组件采用了另一种方法。我们已经确定了一个可用于更改外观的覆盖样式系统。
一个共享组件是用一组很好的默认样式构建的。共享组件还提供了一个 _mixins.scss
文件,其中包含一组 Sass 混合宏,供客户端应用程序导入。 mixins 旨在正确覆盖更改组件主题所需的所有样式。
例如这里的 mixin 允许您更改单选按钮的样式。
原来我的 build.yaml 配置和构建器本身有一些错误,但我终于搞定了 运行。我在 pub 上发布了我的解决方案:https://pub.dartlang.org/packages/inject_assets_builder
README 包含完整工作示例的说明。
如果您在应用中的多个位置使用相同的组件并且只想对其中的一些进行样式设置,nshanans answer 是更好的选择。