Cannot find style '@angular/material'

[palarnab]

Describe the bug
In Angular 13 having the '~' sign before "@use" fails the build. On removing ~ from '@angular/material' fails scss-bundle with the following error:

There is an error in your styles:
[20:11:16] erro: ╷
[20:11:16] erro: 3 │ @use '@angular/material' as mat;

This fix is needed to continue to use scss-bundle in @angular^13

To Reproduce
use scss-bundle to build any file (with a mixin) having the line as the first line:

@use '@angular/material' as mat;

Expected behavior
scss-bundle should complete the bundle successfully

Package version: "scss-bundle": "^3.1.2",
Node version: v12.x
OS: Windows

[Ostabo]

#90

[andreevsm]

Yeah, the same problem for me 😢

[pelord]

Hi there, I get the same problem

[pelord]

@palarnab Did you find a solution?

[palarnab]

Sorry for the late reply... but eventually I did not find a solution from scss-bundle.. I had to clean the generated scss like this:

var fs = require('fs');
fs.readFile('genfile.scss', 'utf8', function (err, data) {
    if (err) throw err;    
    var newFile = data.replace('~@angular/material', '@angular/material');
    fs.writeFile('newfile.scss', newFile, 'utf-8', function (err) {
      if (err) throw err;
      console.log('...scss fixed (https://github.com/reactway/scss-bundle/issues/108)');
    });
});

[pelord]

Thanks! I will probably do the same.

[ceoaliongroo]

Maybe you used scss-bundle like us to export scss assets from a Angular Library to Angular Applications.

If that the case yo can check the Angular Team Solution