Node Sass with apple m1, Big Sur and arm64 - npm

Question

Error: Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
at module.exports (/Users/hhag/Desktop/test_gulp/node_modules/node-sass/lib/binding.js:13:13)
at Object.<anonymous> (/Users/hhag/Desktop/test_gulp/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (node:internal/modules/cjs/loader:1109:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
at Module.load (node:internal/modules/cjs/loader:989:32)
at Function.Module._load (node:internal/modules/cjs/loader:829:14)
at Module.require (node:internal/modules/cjs/loader:1013:19)
at require (node:internal/modules/cjs/helpers:93:18)
at Object.<anonymous> (/Users/hhag/Desktop/test_gulp/node_modules/gulp-sass/index.js:166:21)
at Module._compile (node:internal/modules/cjs/loader:1109:14)
this error occures when I start to use gulp. is there a solution for using gulp-sass with apple m1? thanks

Answer 1

I also had issues installing node-sass on M1, and ended up using the opportunity to replace it with sass, as recommended on the LibSass deprecation notice.
https://sass-lang.com/blog/libsass-is-deprecated
If you’re a user of Node Sass, migrating to Dart Sass is straightforward: just replace node-sass in your package.json file with sass. Both packages expose the same JavaScript API.
As mentioned by #Ti Hausmann you can try with:
npm uninstall node-sass
npm install --save-dev sass
The replacement was completely smooth, it worked on M1, and I couldn't notice any performance impact locally or on the CI.

Answer 2

For npm > 6.9 you can switch your dependency to dart-sass/sass with just one line and from there just use sass as you would before.
npm install node-sass#npm:sass

Answer 3

I think, you are using an M1 Mac. And node-sass currently doesn't support it natively. See: https://github.com/sass/node-sass/issues/3033
For now you can set target arch for running it through Rosetta with:
rm -rf node_modules
npm install --target_arch=x64

Answer 4

I ran into the same error when developing a Vue.js project with node-sass.
I worked around this issue by downgrading to Node version 14.
I’ve done this with n, a Node’s version manager application. See this answer: https://stackoverflow.com/a/50287454.
Check which node version you’re using
$ node -v
v16.3.0
Install n
$ npm install -g n
Get list of available Node versions you can install
$ n ls-remote --all
16.3.0
16.2.0
..
15.14.0
15.13.0
..
14.17.0
14.16.1
..
Install Node version 14
$ sudo n install 14

Answer 5

Just adding for completeness of the answer, that I came across this issue when using the serverless framework (https://www.serverless.com/).
I was receiving a node gyp build error using both Node 16 and 17.
Using nvm I installed node version 14 and this solved my issue.
The steps to fix were:
nvm install v14
nvm use 14
Then I was able to do a yarn command which installed and built correctly.

Answer 6

Here is the official recomendation per gulp-sass Issue #803 - Apple M1 Chip Support
Switch to the sass compiler: Instructions
TL;DR:
Install version 5 of node-sass that does not include a default Sass compiler:
npm install sass gulp-sass --save-dev
or, Yarn
yarn add sass gulp-sass --save-dev
Explicitly set your compiler in your gulpfile:
const sass = require('gulp-sass')(require('sass'));
or, for ES6 modules
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);

Answer 7

yarn add sass or npm install sass
replace "node-sass": with "sass": in package.json
rm -rf node_modules && npm install
Worked for me on my M1 MBP.

Answer 8

Reinstall node to version 14 by downloading from here
https://nodejs.org/dist/v14.0.0/
in your project folder run npm rebuild node-sass

Answer 9

Switching to Sass works just great in m1. As pointed in the top answers. And we should always be using sass in place of node-sass now as it's deprecated.
Here I want to point to one case that some may fall in. That if it's the case I think that would save you some time.
Case
You go and remove node-sass through npm uninstall or even by doing npm install node-sass#npm:sass as pointed in the second answer. You removed node-modules and package-lock.json.And still having the same problem and somehow node-sass is getting compiled.
Not working even after trying to install sass?
If so the case. Make sure to check your dependencies versions. A good chance some of them depends on node-sass on there old versions.
Ex:
"sass-loader": "^8.0.2",
"styles-loader": "^1.0.2"
update the version to latest =>
"sass-loader": "^12.4.0",
"styles-loader": "^3.0.0"
That should do it. And make sure to check all the dependencies that can depend on node-sass and update them.
If for some reason that still is a problem. You can try adding
"optionalDependencies": {
"node-sass": "*"
}
to package.json. I don't think it's necessary though.

Answer 10

This command worked for me,
npm uninstall node-sass -g && npm cache clean -force && npm install node-sass

Answer 11

I have struggle lot with issue my my brand new macOS Monterey M1 Chip Macbook Pro. None of solutions work except It's fix when I have set target arch for NPM installation using below command.
npm install --target_arch=x64