Angular v13 Sass issue (SassError: Can't find stylesheet to import) about mat-datetimepicker

[bbortt]

@alexis-landrieu-avanade I've added the export flag and that seems to work (tested it using your sample)! fix released in v9.0.22. thanks much for your help.

[alexis-landrieu-avanade]

@bbortt I think the Theming part of the README.md file must be updated,

Theming

@use '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme' as matdp;

// Using the $theme variable from the pre-built theme you can call the theming function
@include matdp.mat-datetimepicker-theme($theme);

@JorgeAlcarazKuv see full example

[alexis-landrieu-avanade]

@bbortt unfortunately none of these solutions seems to be working. You will find below a repo with clean Angular project to see the issue.

• https://github.com/alexis-landrieu-avanade/mat-datetimepicker-sass-loader-issue-216

Possible related topic

• ng-packagr - docs: add details about exporting styles for APF 13

[bbortt]

@alexis-landrieu-avanade the following works for me, even with your example..

$ git diff
diff --git a/angular.json b/angular.json
index 87247ee..547a091 100644
--- a/angular.json
+++ b/angular.json
@@ -34,6 +34,11 @@
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "node_modules"
+              ]
+            },
             "scripts": []
           },
           "configurations": {
diff --git a/src/styles.scss b/src/styles.scss
index 275fdf7..ab5fd42 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -2,7 +2,7 @@
 @use '@angular/material' as mat;

-// @use '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme' as mat2;
-@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
+@use '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';

 @include mat.core();

[alexis-landrieu-avanade]

@bbortt I confirm it's working (you can see the build result here), but it's a bit weird why we have to include node_modules in stylePreprocessorOptions ? Are you sure it's not your responsibility to export styles, refer to this documentation ng-packagr - Copy assets - Exporting Styles ?

[alexis-landrieu-avanade]

I confirm it's working 🥇 , thank you for the update .

https://github.com/alexis-landrieu-avanade/mat-datetimepicker-sass-loader-issue-216/runs/4765901860?check_suite_focus=true

[bbortt]

the problem sounds like a sass-loader (respecitvely Angular) migration error to me.. because the style-sheet clearly exists:

$ cat package.json | grep @mat-datetimepicker
    "@mat-datetimepicker/core": "^9.0.21",

$ ls -alh node_modules/\@mat-datetimepicker/core/datetimepicker/ | grep datetimepicker-theme.scss
-rw-r--r-- 1 bbortt bbortt 1.4K Oct 26  1985 datetimepicker-theme.scss

there's multiple changes involved here.. and multiple fixes possible. e.g. removing the leading ~, using @use instead (@import has been deprecated) or even adding the stylePreprocessorOptions to angular.json. please lookup the individual solutions to find out what works best for you!

I do take from this issue, that our documentation is not up to date. I'll have that fixed in the meantime.

[bbortt]

thanks very much for the sample! I'll have a look at it..

[bbortt]

it's a sass mixin, so I think we should. but I am not sure if stylePreprocessorOptions really is redundant after that.

edit: anyway, I will test it as soon as I find some time.. or feel free to open a PR 😉

[JorgeAlcarazKuv]

@alexis-landrieu-avanade @bbortt Im still having this problem using the latest versions of Angular and @mat-datepicker.
Did you manage to make this work without the stylePreprocessorOptions bit? Could you provide an example?

[bbortt]

I should be resolved as @alexis-landrieu-avanade showed in the link provided.. please double check your settings.

[bbortt]

that is probably true..