Importing SCSS partials in Angular Dart

2
votes

I am building a project with Angular Dart (My first serious one). I am familiar with SCSS and have used it in other 'normal' non-angular non-dart related projects. However, SCSS in AngularDart behaves way differently than I'm used to, and it's leaving me a little confused.

The thing I'm struggling with right now is how to import partials. In 'normal' scss I would do something like this to import _mixins.scss:

@import 'mixins';

In my angular dart project, I tried doing something similar. The mixin file I created was one directory up so I tried this:

@import '../mixins';

That didn't work. The exact error message was Error: Can't find stylesheet to import.. So, I googled a bit and came up with this:

@import '/src/components/widgets/mixins';

No luck. It told me that only "package" and "asset" schemes supported. So I tried this:

@import 'package:dbClient/src/components/widgets/mixins';

And it proceeded to tell me "package:" URLs aren't supported on this platform. I've never seen an asset URL and am not sure what that even is, but I tried this anyway:

@import 'asset:dbClient/src/components/widgets/mixins';

Which brought me right back to Error: Can't find stylesheet to import.

So, I did some more googling, and ended up moving my scss partial file from lib/src/widgets/ to a new folder I called lib/assets/scss/. However, I still can't seem to figure out how to import it into my component's scss file.

To sum it up, how do you create an scss partial file an import it into a component's scss file? Also, where do you put it?

(Also tangentially related but less concerning at the moment, what would you recommend as the best way to create global rules that apply to all components?)

Thanks in advance for anyone that can help!

2
sassdartangular-dart

2 Answers

1
votes

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.

0
votes

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.