Working with node_modules assets, and injecting SASS into dependency packages

[Philipp S]

Hello!

In the last weeks, I encountered two problems when working with SASS files and I thought I'd share my solutions in case someone else is in a similar situation.

Problem 1: I wanted to use a SASS library from npm. (In my case, responsive layout grid from MDC web) I didn't want to copy/paste the files into my own repository, but install the files in a transparent way.

Solution: I installed the npm package the usual way, so I ended up with a package.json file and a node_modules directory at the root level of my package.

In my own SASS files, I used the import directive `@import 'asset:fvm/node_modules/@material/layout-grid/mdc-layout-grid';`, because `package:` imports are resolved relative to a packages `lib` directory, but `asset:` imports are resolved in the packages root directory.

I also had to add `node_modules` to the `sources` of my build target. Otherwise, the build system won't recognize the file as a build input and can't resolve the SASS import.

Do notice that `asset:` imports of files outside the `lib/` directory only work in your root package.

Problem 2: In AngularDart, I'm working on a package with Angular components that I use as a dependency for multiple Angular apps (each with their own package). I want to have my CSS scoped to my individual components, but I also want to override some component styles from within the apps. Using SASS mixins (like the angular_components packages does) would lead to a lot of duplicated code, because I'd have to specify the component default styles, then define the mixins, and then import and apply the mixins in every app.

Solution: I wrote an `inject_asset_builder` that makes it possible for a package to read files from packages depending on it. I use that builder to inject a `_variables.scss` file from the app packages into my component package, then import that file in the component .scss files. The package is published here, the README contains a full example: https://pub.dartlang.org/packages/inject_assets_builder

I hope this helps someone. :-)

Best regards

Philipp