Page Comparison

...

Changing your project to use Dart SASS with Node 16

...

If you are updating an existing Node 14 project, that uses npm node-sass, you will need to make a few changes before updating to Node 16 and npm sass.

What is the difference? Read these first - https://www.npmjs.com/package/node-sass/v/7.0.1 vs https://www.npmjs.com/package/sass

1. Delete package-lock.json then edit the package.json file, in theme root.

   1. Add or edit what you need. Here’s a helpful example with explanation: https://www.hook42.com/blog/nodejs-version-control-drupal-themes

2. Run the following, suggested commands:

   1. npm cache clean --force

   2. nvm ls
      Prints the node versions installed on your machine & the current node version you're using.

   3. nvm use 16

   4. npm install

      1. If you try to run npm install however, it will error out due to you trying to use node-sass.

      2. npm uninstall node-sass

         1. Removes node-sass

      3. npm install sass or npm i sass --save or npm install node-sass@npm:sass

         1. Replaces node-sass with the newer sass dependency.

   5. npm install

      1. Should run as expected, if not - follow the errors/warnings as resolve as needed. We have some notes below on known issues.

   6. npm cache clean --force

   7. If you run into a problem, and want to try again:

      1. rm -r node_modules
         This will remove the node_modules folder in your repository. If you are using Webpack, you can also remove the dist folder using rm -r dist and re-build your repository.

Note: If

...

What is the difference? Read these first - https://www.npmjs.com/package/node-sass/v/7.0.1 vs https://www.npmjs.com/package/sass

...

the commands are not automatically altering your package.json file, you may need to edit it manually.

...

Know issues, and Potential warning or errors known with changing Node to version 16 and Dart SASS:

• Node-Sass - Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

• Are you running a M1 mac? ARM64 isn't supported by any version of node-sass right now.

...

• If you try to run npm install after switching to Node 16 - it will error out

...

• npm uninstall node-sass

• npm install sass or npm i sass --save or npm install node-sass@npm:sass
  

...

• . See above for details.

• Deprecation Warning: $weight: Passing a number without unit % (30##) is deprecated.

• Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

  • Here’s a helpful explanation - https://stackoverflow.com/questions/71262427/deprecation-warning-using-for-division-outside-of-calc-is-deprecated-and-wi

• https://stackoverflow.com/questions/70971967/cant-install-node-sass6-for-node-v16

• https://stackoverflow.com/questions/60394291/error-node-modules-node-sass-command-failed

• https://www.drupal.org/project/bootstrap_sass/issues/3259490

• https://www.drupal.org/project/drupal/issues/3261734#comment-14421915

• https://stackoverflow.com/questions/69312134/error-with-node-sass-when-running-npm-install

• Possibly relevant:
  We are using https://www.npmjs.com/package/jpegtran-bin , but should be using https://www.npmjs.com/package/imagemin-jpegtran?

• Math changes required when using Dart Sass - Examples:

// This:
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

// Should become this:
@use "sass:math";

@function strip-unit($num) {
  @return math.div($num, ($num * 0 + 1));
}

// This:
$browser-context: 16;
@function rem($pixels, $context: $browser-context) {
  @return #{strip-unit($pixels)/$context}rem;
}

// Should become this:
@use "sass:math";

$browser-context: 16;
@function rem($pixels, $context: $browser-context) {
  @return #{math.div(strip-unit($pixels), $context)}rem;
}

// These:
$base-space: 1rem; // 16px
$space-10: $base-space / 2; // 8px
$space-20: $base-space * 2; // 32px

// Should become like these:
$base-space: 1rem; //16px
$space-10: calc($base-space / 2); // 8px
$space-20: calc($base-space * 2); // 32px