Node Sass version 7.0.0 is incompatible with ^4.0.0.

[umar-ashrfy]

umar@Umars-Macbook-Pro ~ % npm -v
6.14.8
umar@Umars-Macbook-Pro ~ % nvm -v
0.39.0
umar@Umars-Macbook-Pro ~ % node -v
v12.20.0

While running quasar dev or quasar build.Its showing below error.

umar@Umars-Macbook-Pro golocal-admin % quasar dev

Dev mode.......... spa
Pkg quasar........ v1.8.5
Pkg @quasar/app... v1.5.3
Debugging......... enabled

app:extension Running "@quasar/qcalendar" Quasar App Extension... +0ms
app:quasar-conf Reading quasar.conf.js +18ms
app:dev Checking listening address availability (0.0.0.0:8080)... +4ms
app:quasar-conf Extension(@quasar/qcalendar): Extending quasar.conf... +7ms
app:webpack Extending SPA Webpack config +595ms
app:generator Generating Webpack entry point +6ms
app:dev-server Booting up... +3ms

SPA ██████████ building [40%] 13/17 modules 4 active

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

SPA █████████████████████████ [100%] in ~30s

ERROR Failed to compile with 3 errors 9:26:13 AM

error in ./node_modules/@quasar/quasar-ui-qcalendar/src/index.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass version 7.0.0 is incompatible with ^4.0.0.

• getSassImplementation.js:46 getSassImplementation
  [golocal-admin]/[sass-loader]/dist/getSassImplementation.js:46:13

• index.js:40 Object.loader
  [golocal-admin]/[sass-loader]/dist/index.js:40:61

@ ./node_modules/@quasar/quasar-ui-qcalendar/src/index.sass 4:14-249 14:3-18:5 15:22-257
@ ./.quasar/client-entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

error in ./node_modules/quasar/dist/quasar.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass version 7.0.0 is incompatible with ^4.0.0.

• getSassImplementation.js:46 getSassImplementation
  [golocal-admin]/[sass-loader]/dist/getSassImplementation.js:46:13

• index.js:40 Object.loader
  [golocal-admin]/[sass-loader]/dist/index.js:40:61

@ ./node_modules/quasar/dist/quasar.sass 4:14-249 14:3-18:5 15:22-257
@ ./.quasar/client-entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

error in ./src/css/app.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass version 7.0.0 is incompatible with ^4.0.0.

• getSassImplementation.js:46 getSassImplementation
  [golocal-admin]/[sass-loader]/dist/getSassImplementation.js:46:13

• index.js:40 Object.loader
  [golocal-admin]/[sass-loader]/dist/index.js:40:61

@ ./src/css/app.sass 4:14-298 14:3-18:5 15:22-306
@ ./.quasar/client-entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

`

[mayank091193]

Please try to run below commands and see if it works.

npm uninstall node-sass
npm i -D sass

[umar-ashrfy]

Thanks for reply Mayank. I found this in stack overflow and ran it.

Error got changed to this.

umar@Umars-Macbook-Pro golocal-admin % quasar dev

Dev mode.......... spa
Pkg quasar........ v1.8.5
Pkg @quasar/app... v1.5.3
Debugging......... enabled

app:extension Running "@quasar/qcalendar" Quasar App Extension... +0ms
app:quasar-conf Reading quasar.conf.js +20ms
app:dev Checking listening address availability (0.0.0.0:8080)... +4ms
app:quasar-conf Extension(@quasar/qcalendar): Extending quasar.conf... +7ms
app:webpack Extending SPA Webpack config +669ms
app:generator Generating Webpack entry point +7ms
app:dev-server Booting up... +3ms

SPA ██████████ building [40%] 13/17 modules 4 active

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

SPA █████████████████████████ [100%] in ~43s

ERROR Failed to compile with 3 errors 9:39:51 AM

error in ./node_modules/@quasar/quasar-ui-qcalendar/src/index.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid argument(s): Unsupported output style "nested".

@ ./node_modules/@quasar/quasar-ui-qcalendar/src/index.sass 4:14-249 14:3-18:5 15:22-257
@ ./.quasar/client-entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

error in ./node_modules/quasar/dist/quasar.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid argument(s): Unsupported output style "nested".

@ ./node_modules/quasar/dist/quasar.sass 4:14-249 14:3-18:5 15:22-257
@ ./.quasar/client-entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

error in ./src/css/app.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid argument(s): Unsupported output style "nested".

@ ./src/css/app.sass 4:14-298 14:3-18:5 15:22-306
@ ./.quasar/client-entry.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

[mayank091193]

You may try below. Translate to english in chrome.

dcloudio/uni-ui#126