【问题标题】:dart build: Need to inject an asset from an application into a dependency packagedart build:需要将应用程序中的资产注入依赖包
【发布时间】:2018-11-01 14:05:29
【问题描述】:

背景:我有一个包含 Angular(5.0.0,Dart 2.0.0)组件(我们称之为 my_components)的包,我在许多客户项目(app_1app_2、...)。这些应用程序必须覆盖我必须反映客户企业身份的几乎每个组件的一些 CSS 属性(例如颜色)。这里显而易见的选择是将值定义为 app_n 包中 _variables.scss 文件中的 SASS 变量。 (我不能使用CSS自定义属性,因为需要IE支持(我知道Angular官方不支持IE))这里的问题是组件scss文件必须导入_variables.scss文件,所以my_components em> 需要对 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 依赖项有其他想法),我很想听听他们的意见想法。否则,如果有人能向我解释构建配置的范围,我将不胜感激:

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

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

【问题讨论】:

    标签: dart angular-dart dart-build


    【解决方案1】:

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

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

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

    例如,mixin 允许您更改单选按钮的样式。

    【讨论】:

      【解决方案2】:

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

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

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2019-11-20
        • 2020-01-19
        • 2011-07-04
        • 2010-10-03
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2022-01-15
        相关资源
        最近更新 更多