Why is @use in my scss files not working in my Angular 9.1.0 project?

Question

I am in the process of updating my Angular 8.2.14 project to Angular 9.1.0. I have been successful so far with using ng update to migrate all files to the most up-to-date release version of Angular. However, for this update to succeed I also have to update libraries used in this project. One of these libraries is 'Material Web Components for Angular' (@angular-mdc/web).

This library has a getting started guide in order to be able to implement it properly. This involves changing the file 'angular.json' to set the following:

"stylePreprocessorOptions": {
    "includePaths": [
        "node_modules/"
    ]
},

This getting started guide also involves starting to implement @use instead of @import in my *.scss files so that the components used will have the proper styling.

The problem however is that this @use does not seem to be working.

As an example, in the getting started guide the example states that the following needs to be added to the styles.scss file:

@use './styles/body';

@use '@material/theme' with (
    $primary: #6200ee,
    $secondary: #faab1a,
    $background: #fff,
);

// MDC Typography
@use '@material/typography/mdc-typography';

// MDC Button
@use './styles/button';

// Angular MDC
@use '@angular-mdc/theme/material';

And then when creating the file in styles/_body.scss I should add:

// Override user agent body margin for mdc-top-app-bar
body {
  margin: 0;
}

When doing so however the styling added to the body tag is not used or seen at all in the browser. As if the entire file is not used when compiling styles.scss.

Therefore my question is: What needs to be adjusted to be able to make use of the @use in *.scss files in my Angular 9.1.0 project?

A StackBlitz example can be found here

Weidar

I would rather go with a demo app code then the guide – Glyceric

There is not yet a demo app which I can use. There is however a Stackblitz template, but this template has the same issue as I am experiencing. This is something I reported as an issue to the repo, but for now I have no working reference to go with. – Weidar

this is demo app with code in github: trimox.github.io/angular-mdc-web/#/angular-mdc-web/home stackblitz seems to have problem with \@use directive - try switching to \@import – Glyceric

The issue is also occurring in my local project and not just on StackBlitz. And this problems seems to be my entire culprit since I need to use \@use and not \@import as stated in the getting started guide. – Weidar

I do not get it: @use is not working for you locally? – Glyceric

Exactly. You provided me with an answer and possible solution for the issue in StackBlitz. But the issue is also occurring in my own project. Switching to \@import is not a solution since I need to use \@use in order to keep using the \@angular-mdc/web library which is using material-components-web as a dependency where \@use is the way to use its scss files. – Weidar

I would make sure anything is up to date starting with nodejs – Glyceric

can you post your coed/repo somewhere? – Glyceric

or just check you node_modules\sass* packages: mines are [email protected] & [email protected] - they are probably responsible for scss processing – Glyceric

as per sass-lang.com/documentation/at-rules/use only dart library supports @use so maybe you environment does not use it but one of the others – Glyceric

I can not provide you with my project, but here is the non-working StackBlitz example: stackblitz.com/edit/angular-mdc-kwwzgt – Weidar

Got this problem too, did you solve it? or sould I start a bounty? – Bixler

@PavelB. I have yet to solve this problem. I have been unable to find a solution myself, nor did I receive a working solution in this issue or in the issue created on the \@angular-mdc/web repo. – Weidar

@Weidar I have solved it to – Bixler

@PavelB. You solved it? What was the culprit then? – Weidar

@Weidar Just updated the scss related packages, because it's new sass feature. Then I had to update to new 2020 version of Webstorm because the old version didn't seem to "know" \@use and took that as invalid css... – Bixler

Answer 1

I have finally been able to solve this issue.

• I upgraded to Angular version 10.0.8 by using the ng update tool as documented here
• I removed node-sass as a dev dependency from my project

Weidar

Any reason why the upgrade to v10 is needed? I see in a lot of comments that we should remove node-sass, but not sure why the Angular upgrade helps. – Rachellrachelle

There should be no reason, dart-sass shipped with Angular 8, removing the node-sass dependency will prevent using that one (which does not supports the @use keyword). – Gravitative

Answer 2

I have been facing this same problem, but only with the _variables.scss. I am using this to generate CSS variables that are used globally. So I just added this file to the angular.json.

Underdone

Answer 3

It seems to be related to sass-loader, as stated in this ticket. https://github.com/webpack-contrib/sass-loader/issues/804

There is a workaround for now by configuring webpack.

Antioch

Answer 4

Just use ... as <namespace>; like:

@use "any-partials" as foo;

.any-class {
  background-color: foo.$any-var;
}

Or without namespace, but use *, like:

@use "any-partials" as *;
    
.any-class {
  background-color: $any-var;
}

_

Angular CLI: 15.0.5
Node: 18.12.1
Package Manager: npm 8.19.2
OS: linux x64

Pasty