SCSS Import

[paul-wade]

I'm wondering if I have messed something up.

The only way I can import the material-css-vars main file is by using this import @import 'angular-material-css-vars/src/lib/_main';

Has something changed and the documentation is out of date with the latest version of angular?

[johannesjo]

It shouldn't have as far as I am aware. In my case

@import '~angular-material-css-vars/src/lib/main';

and

@import '~angular-material-css-vars/src/lib/_main';

both work.

[maxfriedmann]

@paul-wade I have the same problems with the scss import. Used to work <3.0.0, but now the issue will be solved in #103

[json-derulo]

Should be fixed with version v4.0.1 via #110.

[crose9876]

@johannesjo @json-derulo I don't think this has truly been fixed. Neither @use or @import 'angular-material-css-vars/src/lib/main' work on version 4.0.2 at the moment. They display "can't find stylesheet" errors when you try to build with the "build-angular:browser" builder for applications.

Now, 'angular-material-css-vars/main' does work with the browser builder. However, 'angular-material-css-vars/main' does not work when trying to build an angular library, which is built with the "build-angular:ng-packagr" builder. ng-packagr will only build successfully with 'angular-material-css-vars/src/lib/main'.

This creates a catch 22 for developers who have an angular application as well as angular libraries that the applications uses. As it stands right now, you can't successfully build both your application and angular libraries with version 4.0.2. ng-packagr(builds library) ignores sass exports while the export section(which is recognized by the application builder) only accepts imports that match exactly.

Maybe it should be it's own issue but it seemed related to this post. But I would like if you updated package.json's recently added export section to also include './src/lib/main', '.src/lib/public-util' and './src/lib/variables' paths as well. That should solve the problem in theory, though I'd probably be the first to test and confirm with my application should that update get implemented. But if there are other workarounds or solutions that you know, I'm all ears.

[json-derulo]

@crose9876 This seems to be related to the following issue: https://github.com/ng-packagr/ng-packagr/issues/1631

Is it an option for you to provide the related SCSS code as an asset? I don't see a particular reason why ng-packagr needs to compile any angular-material-css-vars related SCSS, it should be possible to do this at a later point when building the applications, which would avoid the issue.

[crose9876]

@json-derulo In this case, the scss code in question is in component scss files, so it seems like it may be harder to provide those files to assets in ng-package.json. I still need to take some time to see if that solution would work though I'm skeptical.

[Wlada]

Is there some workaround for this? We are updating angular to version 14, and this issue is a big blocker for us. I'm willing to help and have already tried something but haven't been successful.

[json-derulo]

@Wlada your issue is unrelated, you need to use v3.x with Angular 14.

[crose9876]

I've looked into the potential assets solution/workaround. And it doesn't look think it'll work. My library has a lot of component.scss files that needs to import/use 'angular-material-css-vars/variables' or 'angular-material-css-vars/public-util'. The components will be compiled when building the library with ng-packagr and I'm not sure how to get around that.

The solution I know that would work would be including the src/lib paths(not in place of the shortcut paths but in addition to) in exports in package.json as I mentioned earlier.

However, I'll continue to look into other potential solutions in case you guys don't think that's a good idea. Still I'm all ears when it comes to any kind of workaround.

[json-derulo]

@crose9876 @johannesjo The issue with ng-packagr is tackled by #119

[johannesjo]

Thank you very much @json-derulo !!!

[json-derulo]

@crose9876 With v5 there is a new feature that you can use a single entrypoint. You just have to import like the following: @use "angular-material-css-vars" as mat-css-vars, and you can use all the available mixins and variables. I think this should also work in your library use case. Could you check this?

[crose9876]

I won't be able to check this at the moment as my project is still on Angular 15 and I wouldn't be able to use v5 until I upgrade to 16. When I can upgrade to 16, I'll check then. Sorry about that.

[json-derulo]

@crose9876 No worries, there is no rush :) Thanks in advance!