Can't find stylesheet to import. @USE inside node_modules

[pelord]

Describe the bug I have a setup file (as described in https://github.com/reactway/scss-bundle/issues/90#issuecomment-885997412 ) to handle my "@use " since the last year (july 2021) run from gulp. Everything was fine.

here the command 'node ./node_modules/scss-bundle/dist/cli/main.js -p ./ -e ./packages/core/src/style/index.theming.scss -o ./dist/core/style/index.theming.scss

Since my migration to angular 13, I had to replace tilde to a full path import. Seem the -p ./ do not work anymore!

from ==> @use '~@angular/material/_index.scss' as mat; 
to   ==> @use './node_modules/@angular/material/_index.scss' as mat; 

So far so good.

In the next migration to angular 14, I hit this issue...

            '[10:19:00] erro: There is an error in your styles:\r\n' +
            "[10:19:00] erro: Can't find stylesheet to import.\n" +
            "[10:19:00] erro: 1 │ @use '@angular/cdk';\n" +
            '[10:19:00] erro:   │ ^^^^^^^^^^^^^^^^^^^\n' +
            '[10:19:00] erro:   ╵\n' +
            '[10:19:00] erro:   node_modules\\@angular\\material\\core\\style\\_menu-common.scss 1:1  @forward\n' +
            '[10:19:00] erro:   node_modules\\@angular\\material\\_index.scss 33:1                  @use\n' +
            '[10:19:00] erro:   stdin 1:1                                                        root stylesheet on line (1, 1)'

Any hint how to fix this issue?

Im running scss-bundle 3.1.2 On Windows Npm 8.14.0 Node 16.16.0 from nvm-windows

To Reproduce Steps to reproduce the behavior:

1. Go to https://github.com/infra-geo-ouverte/igo2-lib
2. Checkout branch ng14
3. npm install
4. run npm run gulp core:concatStyles
5. See error

Expected behavior An effective bundle creation ? ;)

Package version: v3.1.2 Node version: v16.16.0 OS: Windows

[jtc10005]

we are having the same issue. It started when we upgraded to angular 14.

[pelord]

@jtc10005

Here what i've done... not super clean... i know ;(

gulp.src(['./node_modules/@angular/material/core/_core.scss']).pipe(replace(`@use '@angular/cdk';`, `@use './node_modules/@angular/cdk/_index.scss' as cdk;`)).pipe(gulp.dest('./node_modules/@angular/material/core/'));

I dit it every time i've hit this issue...

[ceoaliongroo]

I have also and error in the sass math functions, into angular material library

[13:55:47] erro: There is an error in your styles: 
[13:55:47] erro: Undefined function.                                              
[13:55:47] erro:   ╷                                                              
[13:55:47] erro: 9 │ $vertical-padding: math.div($target-height - $font-size, 2); 
[13:55:47] erro:   │                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[13:55:47] erro:   ╵
[13:55:47] erro:   ..\..\node_modules\@angular\material\tooltip\_tooltip-theme.scss 9:20           @use

any idea? what to import

[ceoaliongroo]

We stop using scss-bundle and following the Angular Team recommendation to handle scss assets into Angular Library