Can't install node-sass@6 for node v16

Question

This is my package.json after uninstalling sass node-sass and sass-loader because I changed my node version from 14 to 16,

{
  "name": "our-awesome-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "static": "NUXTJS_DEPLOY_TARGET=static NUXTJS_SSR=true nuxt generate",
    "build-and-start": "NUXTJS_DEPLOY_TARGET=server NUXTJS_SSR=false nuxt build && NUXTJS_DEPLOY_TARGET=server NUXTJS_SSR=false nuxt start"
  },
  "husky": {
    "hooks": {
      "pre-commit": "cross-env PRE_COMMIT=true lint-staged -r"
    }
  },
  "dependencies": {
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "nuxt-i18n": "^6.28.1",
    "nuxt-purgecss": "^1.0.0",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^8.0.0",
    "@nuxtjs/google-fonts": "^1.3.0",
    "@nuxtjs/storybook": "^4.2.0",
    "@nuxtjs/style-resources": "^1.2.1",
    "@vue/cli-plugin-babel": "^4.5.15",
    "babel-eslint": "^10.1.0",
    "eslint": "^8.7.0",
    "husky": "^7.0.4",
    "nuxt-svg-loader": "^1.2.0",
    "postcss": "^8.4.5"
  }
}

According to this I should install node-sass version 6.0

But I'm trying: npm install --save-dev sass@1.49.0 node-sass@6.0.1 sass-loader@10.2.1

Also, read here to add --unsafe-perm so I tried: npm install --save-dev --unsafe-perm sass@1.49.0 node-sass@6.0.1 sass-loader@10.2.1

But it keeps failing, being the first error always this one:

npm ERR! code 1
npm ERR! path /Users/toniweb/Proyectos/our-awesome-project/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /Users/user/.nvm/versions/node/v16.13.1/bin/node /Users/toniweb/Proyectos/our-awesome-project/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=

I tried removing node_modules package-lock.json and the same result

Of course, this is driving me nuts.. please tell me that anyone has an idea to try out

Are you running a M1 mac? ARM64 isn't supported by any version of node-sass right now. It blocked pending GitHub Actions adding support to be able to build and test — nschonni, Feb 03 '22 at 20:24
@ToniMichelCaubet is the initial issue for you that it fails to install the packages? I recommend getting a more updated version of 'sass-loader'. Also, 'node-sass' is deprecated and you should only need 'sass' if you are setting up your own webpack (according to webpack documentation). I hope this helps. https://webpack.js.org/loaders/sass-loader/#getting-started — Ken, Feb 06 '22 at 20:38
@Ken thanks a lot for this info. Didn't know node-sass was the way down.. but I forgot to mention that our project is a nuxt app (even that is visible in the package.json) and still can't get it to work w/o node-sass.. i'll research a bit more — Toni Michel Caubet, Feb 07 '22 at 13:30
the "new" error is `Error: Compiling RuleSet failed: Properties options are unknown` — Toni Michel Caubet, Feb 07 '22 at 14:00

score 26 · Accepted Answer · edited Sep 14 '22 at 09:57

26

I think you are using ARM64 which is not supported by node-sass.

You should replace node-sass with sass(Dart Sass) as LibSass is deprecated

Just replace node-sass in your package.json file with sass. Both packages expose the same JavaScript API.

npm uninstall node-sass
npm install --save-dev sass

edited Sep 14 '22 at 09:57

Suhail Taj

1,008
8
8

answered Feb 15 '22 at 05:54

Arpit Jindal

504
4
7

3

What about if node sass is a sub dependency of some packages ? – famas23 Mar 16 '23 at 20:32

score 0 · Answer 2 · answered Feb 09 '22 at 11:53

We have a Nuxt 2.15.8 app running on Node 16, in which a couple of months ago we switched from node-sass to sass, as the former is deprecated.

I recall at the time it took some figuring out, but in the end we just needed to install some postcss parsers to get the Nuxt app fully working with sass & sass-loader.

Taking as the baseline the package.json in your post, try:

npm install --save-dev \
  sass@1.49.4 \
  sass-loader@10.2.1 \
  postcss-html@1.3.0 \
  postcss-scss@4.0.3

score -2 · Answer 3 · answered Feb 11 '22 at 09:59

The error message hints to node-gyp as the culprit. To work on a MacOS, node-gyp requires the XCode Command Line Tools to be installed (see here). So basically, in case you haven't done that yet, run

xcode-select --install

Or try any of the other methods described here. Then retry to install node-sass.

score -2 · Answer 4 · answered Feb 11 '22 at 10:12

-2

in fact , I think you have pasted the wrong error infomation. there are two ways may help you

npm i --force this command will ignored the error in the package.json
use the pnpm , you can install it by

npm i -g pnpm 
# then 
pnpm i

answered Feb 11 '22 at 10:12

taco

88
4

Can't install node-sass@6 for node v16

4 Answers4