Background: I have a package with Angular (5.0.0, Dart 2.0.0) components (let’s call it my_components) that I use in many customer projects (app_1, app_2, …). These apps must override some CSS properties (e.g. colors) of almost every component I have to reflect the customers corporate identity. The obvious choice here would be to define the values as SASS variables in a
_variables.scss file in the app_n packages. (I can’t use CSS custom properties because IE support is required (I know IE is not officially supported by Angular)) The problem here is that the component scss files must import the
_variables.scss file, so my_components would need a dependency on app_n, which isn’t possible.
I tried to solve this the following way: In my_components I have a file
lib/_variable.default.scss. The component scss files still contain the line
@import package:my_components/_variables.scss. I wrote an
InjectAssetsBuilder that runs on the .default.scss file extension and produces .scss files. The builder is configurable and expects a mapping
'my_components|lib/_variables.scss': 'app_n|web/variables.scss' in the build.yaml configuration of app_n.
The builder is supposed to be triggered by the .default.scss file, then place the customized file right next to it, so it can be found by the component imports.
However, I can’t get it to work. If I set
all_packages (in the builder definitions of my_components), the builder doesn’t receive the mapping configuration (from the build targets section in app_n). If I set
none, the builder no longer takes my_components as an input, so it can’t see and be triggered by the .default.scss file.
If anyone has worked on a similar problem before (or has another idea how app_n can inject SASS variables into the my_components dependency), I’d love to hear their thoughts. Otherwise, I’d be grateful if someone could explain to me how build configurations are scoped:
- Why doesn’t the
auto_apply: all_packagesbuilder see the configuration in app_n?
- Why is the builder from the target definition in app_n unable to see assets in my_components?
If you think I made a mistake with the configuration, I can try to extract a minimal example.
It turned out I had some errors in my build.yaml configuration and the builder itself, but I finally got it running. I published my solution on pub: https://pub.dartlang.org/packages/inject_assets_builder
The README contains instructions for a full working example.
If you use the same component in multiple places in your app and only want to style some of them, nshanans answer is the better choice.
Answered By – pschiffmann
Answer Checked By – Timothy Miller (FlutterFixes Admin)