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

Answer 1

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.

Answer 2

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