Importing SCSS partials in Angular Dart
dart-sass will follow package syntax and rules for imports. Partials definitely work you can see that here:https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/material_button/material_button.scss
The asset syntax never really took off and I think most of the tools probably don't support it at this time. Just put the assets into the lib alongside the other source code.
I'm not sure if dart-sass respects the src convention that it should not be imported using the package syntax. That might be part of the problem.
In terms of where to put globals. I tend to subscribe to the notion that you don't want to pollute the global space and so have common imports for common variables and mixins and use those in the components when needed. Understandably these can be a bit heavyweight for some, but I work on really big projects so not having global CSS messing with things saves us a lot of headaches. You can see that pattern in play here: https://github.com/dart-lang/angular_components/blob/master/angular_components/lib/material_button/_mixins.scss
That said another strategy is you can have a regular scss/css file linked in the root html page that will have common selectors/styles that will apply everywhere. Since it is outside of the encapsulation space it will apply to everything that matches.
No sure what is your problem here but:
Register Sass in pubspec.yaml like this in your dev_dependencies::
dev_dependencies: sass_builder: ^2.1.1
Then, in your .scss file put this:
- @import 'package:angular_components/app_layout/mixins';
Finally, in your component file add this, inside @Component() :
styleUrls: const [ 'name_of_your.css', ])
This is .css not .scss.
See for more informations
Update
include this line in your main .scss file:
@import '_partial.scss';
Then, in your _partial.scss file, precise !important after each property you need to override.
That should works, at least, it works for me as expected.