If you have an existing project, and are looking to change your site to use Dart SASS, give this guide a read for some helpful commands, common issues and solutions.
If you are starting a new project, there are also some helpful steps included for you.
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
Edit the package.json file, in theme root.
Add or edit what you need. Here’s a helpful example with explanation: https://www.hook42.com/blog/nodejs-version-control-drupal-themes
Run the following, suggested commands:
npm cache clean --force
nvm ls
Prints the node versions installed on your machine & the current node version you're using.nvm use 16
npm install
If you try to run
npm install
however, it will error out due to you trying to usenode-sass
.npm uninstall node-sass
Removes it
npm install sass
ornpm i sass --save
ornpm install node-sass@npm:sass
Replaces
node-sass
with the newersass
npm install
Should run as expected, if not - follow the errors/warnings as resolve as needed. We have some note below on know issues.
npm cache clean --force
If you run into a problem, and want to try again:
rm -r node_modules
This will remove thenode_modules
folder in your repository. If you are using Webpack, you can also remove thedist
folder usingrm -r dist
and re-build your repository.
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 runnpm install
after switching to Node 16 - it will error out. See above for details.
Deprecation Warning: $weight: Passing a number without unit % (##) 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?