Search code examples
angularsass

Sass error on Angular update "@use is coming soon, but it's not supported in this version of Dart Sass"


I received an error message during an update of a project from Angular v7 to v8.

@use is coming soon, but it's not supported in this version of Dart Sass
  • I'm following the steps of Angular update instructions from 7.2 to 8.2, section "Before Updating" is done. The error appears in the first steps of the "During the Update" section.
  • The project previously used node-sass, ng8 now uses sass as part of the migration.
  • The package @angular-devkit/build-angular forces [email protected], but I'm reading @use isn't available until [email protected].
  • @angular-devkit/[email protected] is the first version with sass newer than 1.22.9, but I'm assuming I should use it when upgrading ng from 8 to 9, and I'm not there yet.
  • I have not an implicit reference to sass in my package.json, it's implied from the use of the base package @angular-devkit/build-angular. I do use sass files for the component styles.

I'm stuck here because I wish to build, run and review the app before continuing the upgrade process to ng 9. I didn't know what I'm missing here.

Btw I think this is not the same scenario of the unanswered question 60030890 and probably doesn't get solved the same way.


Solution

  • I got the same error when upgrading from Angular 7.2 to 8.2. My error was:

    Error: @use "sass:math";

    @use is coming soon, but it's not supported in this version of Dart Sass.

    14 │ @use "sass:math";

    node_modules\ladda\css\ladda.scss

    The error is coming from 'ladda', but I wasn't loading 'ladda' - it was a dependency of [email protected]:

    "node_modules/angular2-ladda": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/angular2-ladda/-/angular2-ladda-2.0.2.tgz",
      "integrity": "sha512-I15SVZF3y+/cZ+MqDow1z88X2qc0xGNdwGn7RAVp3u3TuhOgIb4QRGe4zk8elY1FzKF+7IRzlJpfpga3kdTvhg==",
      "dependencies": {
        "ladda": "^2.0.1",
        "tslib": "^1.9.0"
      },
    

    When doing an "npm install", I noticed that [email protected] was being used. I did the following to use [email protected] hoping it would not use @use:

    npm install [email protected]

    After that my "ng build" worked fine.