9

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

Rik
  • 342
  • 2
  • 6
  • 18
  • I would rather go with a demo app code then the guide – Kodak Apr 09 '20 at 17:02
  • 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. – Rik Apr 10 '20 at 06:29
  • 1
    this is demo app with code in github: https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/home stackblitz seems to have problem with \@use directive - try switching to \@import – Kodak Apr 11 '20 at 13:40
  • 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. – Rik Apr 14 '20 at 06:41
  • I do not get it: @use is not working for you locally? – Kodak Apr 14 '20 at 16:41
  • 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. – Rik Apr 15 '20 at 06:19
  • I would make sure anything is up to date starting with nodejs – Kodak Apr 16 '20 at 07:28
  • can you post your coed/repo somewhere? – Kodak Apr 16 '20 at 12:46
  • or just check you node_modules\sass* packages: mines are sass@1.26.3 & sass-loader@8.0.2 - they are probably responsible for scss processing – Kodak Apr 16 '20 at 12:49
  • as per https://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 – Kodak Apr 16 '20 at 13:04
  • I can not provide you with my project, but here is the non-working StackBlitz example: https://stackblitz.com/edit/angular-mdc-kwwzgt – Rik Apr 16 '20 at 16:24
  • Got this problem too, did you solve it? or sould I start a bounty? – Pavel B. Jul 26 '20 at 22:30
  • @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. – Rik Jul 27 '20 at 07:34
  • @Rik I have solved it to – Pavel B. Jul 27 '20 at 07:39
  • @PavelB. You solved it? What was the culprit then? – Rik Jul 28 '20 at 06:58
  • @Rik 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... – Pavel B. Jul 29 '20 at 07:40

4 Answers4

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.

angular.json config

wizAmit
  • 310
  • 1
  • 8
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
Rik
  • 342
  • 2
  • 6
  • 18
  • 1
    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. – ahong Aug 03 '21 at 00:44
  • There should be no reason, dart-sass shipped with [Angular 8](https://blog.ninja-squad.com/2019/05/29/angular-cli-8.0/), removing the `node-sass` dependency will prevent using that one (which does not supports the @use keyword). – Flavien Volken Oct 03 '22 at 07:11
0

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.

Mujirushi
  • 1
0

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
Cesar Devesa
  • 990
  • 6
  • 14