npm install -D sass-loader node-sass Vue.js 2021

Question

Hi issue is setting up SASS for Vue.js I run: Node.js - 15.7.0 Vue.js - @vue/cli 4.5.11 This is an error in the console I am having while running this command: npm install -D sass-loader node-sass

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: webpack@3.12.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"2 || 3 || 4" from babel-loader@7.1.5
npm ERR!   node_modules/babel-loader
npm ERR!     dev babel-loader@"^7.1.1" from the root project
npm ERR!   peer webpack@"^3.1.0" from extract-text-webpack-plugin@3.0.2
npm ERR!   node_modules/extract-text-webpack-plugin
npm ERR!     dev extract-text-webpack-plugin@"^3.0.0" from the root project
npm ERR!   8 more (file-loader, friendly-errors-webpack-plugin, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev sass-loader@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: webpack@5.18.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.36.0 || ^5.0.0" from sass-loader@10.1.1
npm ERR!   node_modules/sass-loader
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See C:\Users\marko\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\marko\AppData\Local\npm-cache\_logs\2021-01-28T16_11_07_342Z-debug.log

Please mark the answer as accepted – Beerswiller May 27 '21 at 01:22 — Beerswiller, May 27 '21 at 01:22

score 56 · Accepted Answer · answered Feb 22 '21 at 21:20

56

I had the same problem today. Try installing sass-loader v10.0.5 instead:

npm install -D sass-loader@10.0.5 node-sass

answered Feb 22 '21 at 21:20

Alfredo L'huissier

737
6
6

2

This works! Though we need to install appropriate node-sass version as per the node version installed in the machine as per the answer https://stackoverflow.com/a/64833083/9616168 – Pavan J Sep 06 '21 at 19:00

score 14 · Answer 2 · answered Oct 28 '21 at 22:40

14

Actually, there's a note about this issue in Vue CLI docs:

When using webpack version 4, the default in Vue CLI 4, you need to make sure your loaders are compatible with it. Otherwise you will get errors about confliciting peer dependencies. In this case you can use an older version of the loader that is still compatible with webpack 4.

npm install -D sass-loader@^10 sass

answered Oct 28 '21 at 22:40

mirkinoid

356
2
6

1

This is the one that worked for me. Wish this had more points since the Vue CLI docs seem to already address it – Kosi Nov 09 '21 at 21:45
1

This also worked for me. – Igor Nov 21 '21 at 22:45

score 4 · Answer 3 · answered Sep 07 '21 at 05:56

4

I also got this error when install sass-loader. Fix it by the reference here: https://github.com/laravel-mix/laravel-mix/issues/2562

Need to add --legacy-peer-deps to resolve it.

answered Sep 07 '21 at 05:56

gangdaner

61
5

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – M123 Sep 07 '21 at 11:29

score 2 · Answer 4 · answered Aug 04 '22 at 11:43

2

i fixed this bug by running npm install --force

answered Aug 04 '22 at 11:43

sameraze agvvl

397
4
11

score 1 · Answer 5 · answered Nov 05 '21 at 11:24

1

Have you tried to use sass instead of node-sass?

answered Nov 05 '21 at 11:24

Stefano Nepa

491
1
6
13

npm install -D sass-loader node-sass Vue.js 2021

5 Answers5

Linked