question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vue-cli create project fails with Sass/SCSS (with node-sass) in Node.js 16

See original GitHub issue

Version

4.5.13

Environment info

Mac OS Big Sur 11.2.3
node v16.1.0
npm 7.13.0
@vue/cli 4.5.13


Steps to reproduce

vue create vue4

Vue CLI v4.5.13 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS, Router, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 3.x ? Use class-style component syntax? No ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? Yes ? Save preset as: LAst Vue4

What is expected?

Installed project

What is actually happening?

Too many npm errors when installing dependancies.

npm ERR! code 1 npm ERR! path /Users/admin/Documents/WWW/myland.loc/vue4/node_modules/node-sass npm ERR! command failed npm ERR! command sh -c node-gyp rebuild npm ERR! CXX(target) Release/obj.target/libsass/src/libsass/src/ast.o npm ERR! CXX(target) Release/obj.target/libsass/src/libsass/src/ast_fwd_decl.o

… many lines of errors …

npm ERR! gyp ERR! node-gyp -v v3.8.0 npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in: npm ERR! /Users/admin/.npm/_logs/2021-05-14T08_02_09_147Z-debug.log ERROR command failed: npm install --loglevel error --legacy-peer-deps

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
sodateacommented, May 14, 2021
  • node-sass is deprecated, please avoid using it if possible (use sass instead). Vue CLI v5 won’t provide this option on creation anymore.
  • Node.js 16 is too new. node-sass has only released a version that supports Node.js 16 days ago. Vue CLI still creates projects with an older version of node-sass, which supports Node.js 14 at most.
0reactions
TomHall2020commented, Oct 27, 2021

Agreed, just had the same problems while trying my first tutorial in vue, its confusing to have that option in there if its known to fail!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error When Installing node-sass for Vue JS Project
I was having a similar issue with Node version 16 and Vue 3. The problem seems to be node-sass related and is incompatible...
Read more >
Fix Node-sass error while creating project using vue/cli
This error occurs when CSS Pre-processor is selected during the setup options of the project using vue/cli due to some current conflict errors....
Read more >
sass-loader - npm
Loads a Sass/SCSS file and compiles it to CSS. Getting Started. To begin, you'll need to install sass-loader : npm install sass-loader ...
Read more >
node sass does not yet support your current environment mac
OS X 64-bit with Node.js 4.x. How to solve the problem. By going into the project folder and then executing the command: npm...
Read more >
Cannot find module 'node-sass' error | bobbyhadz
To solve the error "Cannot find module 'node-sass'", make sure to install the node-sass package by opening your terminal in your project's root...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found